I'm tired of searching and not being able to accomplish this: 1 label at top left of a cell and the content at the bottom center. Trying to achieve this, I'm using 2 divs inside a TD, but I don't mind changing that as long as I can achieve the goal.
I don't know the size of the labels (they can be translated into different languages and therefore taking different sizes).
The original table will be taking half of an A4 Portrait in height. It's 7 (row) * 5 (columns) (with the exception of 1 single cell in the middle of it that I use rowspan="2")
I've tried the "set the parent to position: relative and make the container position: absolute; bottom: 0" solution and I can't make it work.
Basically, I want to have 1 label set to the top left and the content in the bottom middle of the cell.
The 950px width is for printing purposes.
Here is a jsfiddle link to exemplify my problem.
http://jsfiddle.net/o1L31qwu/
Thanks in advance.
change your CSS like this:
.tableClass {
width: 950px;
table-layout: auto;
margin-top: 8px;
border-color: black;
border-width: 0 0 1px 1px;
border-style: solid;
border-spacing: 0;
border-collapse: collapse;
}
.tableClass td{
border-color: black;
border-width: 1px 1px 0 0;
border-style: solid;
margin: 0;
padding: 4px 0;
position:relative;
vertical-align:top;
}
.label{position:relative; margin:4px; margin-bottom:30px /* adjust to bottom size */; }
.content{width:100%; position:absolute; bottom:1px; left:0; background:#fc0; margin:0; text-align:center;}
I have added a background color for visualization purposes, but of course you'll need to edit at will . See fiddle here
Here's a flexbox solution that will handle arbitrarily-sized .label and .content: http://jsfiddle.net/5kzzgkgr/.
The content of the cell should be placed in a wrapper div:
<td>
<div>
<div class="label">This Label is large / and divided [eph] really large label.And some more text, text, text, and more text.....<br /><br /></div>
<div class="content">BOTTOM</div>
</div>
</td>
CSS:
.tableClass td{
height: 0px;
}
.tableClass div:only-of-type {
height: 100%;
background-color: #ccc;
display: flex;
flex-flow: column wrap;
justify-content: space-between;
}
Related
I cannot work out why some of the images on this page are wrongly sized (2 of them appear smaller than the others).
https://www.violinschool.org/video-testing/
I have re-cropped them all to the same size (355x200, ratio 16:9) so there must be something else causing it.
Am trying to check the html and CSS (it's a wordpress site using Toolset Types) to see what might be wrong, but to no avail.
Try adding this line to your CSS file and see if it helps:
table.wpv-loop.js-wpv-loop td {
width: 25%;
}
As <td> in table are not fixed width they get the width according to the content inside it untill the width is not defined in css.
You can do it with 2 solutions.
First is Add table-layout:fixed in table.
table{
border-bottom: 1px solid #ededed;
border-collapse: collapse;
border-spacing: 0;
font-size: 14px;
line-height: 2;
margin: 0 0 20px;
width: 100%;
table-layout: fixed;
}
Adding table-layout:fixed will restrict the table to show each cell with same width.
and second Use width in <td>
As you are using exact 4 <td> in one row so you can give width manually width:25%.
td {
border-top: 1px solid #ededed;
padding: 6px 10px 6px 0;
width: 25%;
}
Problem is not in images but in table. Now each table-cell is taking dynamic width according to its content. If one table-cell has more content it will be wider than others.
Add table-layout: fixed property on table then all table-cell will take equal width and your problem will be fixed.
table {
border-bottom: 1px solid #ededed;
border-collapse: collapse;
table-layout: fixed;
border-spacing: 0;
font-size: 14px;
line-height: 2;
margin: 0 0 20px;
width: 100%;
}
Firstly, is it possible to achieve this using only CSS?
I have built a table that can scroll both horizontally and vertically however, I want to have the header encapsulated within it's container and not appear outside of the wrapper. So that when you scroll horizontally the corresponding header is in line with the content of it's designated column.
Using different variations of position: absolute and position: static give me some intended results but not the complete solution.
You'll note the width applied to the section element to give the effect of scrolling horizontally within the enclosed region.
Here is a JSFIDDLE example of what I have so far and CSS below to reference
https://jsfiddle.net/ko6qco1r/
html, body{
margin:0;
padding:0;
height:100%;
}
section {
position: relative;
border: 1px solid #000;
padding-top: 37px;
background: grey;
width: 300px;
}
.container {
overflow-y: auto;
overflow-x: scroll;
height: 200px;
}
table {
border-spacing: 0;
width:100%;
}
td + td {
border-left:1px solid #eee;
}
td, th {
border-bottom:1px solid #eee;
background: white;
color: #000;
padding: 10px 25px;
}
th {
height: 0;
line-height: 0;
padding-top: 0;
padding-bottom: 0;
color: transparent;
border: none;
white-space: nowrap;
}
th div{
position: absolute;
background: transparent;
color: #fff;
padding: 9px 25px;
top: 0;
margin-left: -25px;
line-height: normal;
border-left: 1px solid black;
}
th:first-child div{
border: none;
}
This is another one of those interesting challenges (like vertical centering) brought to us by the inaction of the W3C. Also like vertical centering, you can't put a fixed header on a table with a horizontal scrollbar using position: fixed; on the thead element. But you do have a couple of options.
Option 1 - Horizontal Scrolling (http://codepen.io/staypuftman/pen/JXbpvZ)
The key here is to reestablish your table layout as table-layout: fixed; CSS-tricks has a good piece on this approach and then put a min-width value on your container when you want the scrollbars to appear. This makes the table scrollable left to right and maintains the integrity of the column headers on smaller devices. But the header is not fixed.
Option 2 - Fixed Header (https://jsfiddle.net/dPixie/byB9d/3/light/)
Your code looked like a rip-off of this guy's work, so I thought I'd repost here to give him some credit. This approach creates a series of <div> elements that mirror the contents of the <th> elements and uses some VERY creative positioning techniques to get it all to work.
There is a much better run-down on Salzar design that shows some examples and explains in detail all the complicated maneuvers to get this right.
There is an odd problem here that I don't really understand.
I'm trying to just make the middle of the 3 vertical divs have another div inside it which has a black border and 10px of margin on all sides.
However, on the right side there is no visible margin, and on the bottom the div flows right out of the parent div and out of site into the footer.
What am I doing wrong? CSS for the middle div pair...
#mainContent {
height: 100%;
width: 100%;
}
#platter {
border: 1px solid black;
margin: 10px;
height: 100%;
width: 100%;
}
http://jsfiddle.net/Lf7wuty0/1/
Solution: http://jsfiddle.net/efordek0/1/
Borders are applied outside of the element, therefore if your element is width:100%; with a border: 1px solid black;, the border will fall outside of your desired constraint.
Instead of applying a margin to the inner-div #platter, apply a padding to the outer div #mainContent. This way the 100% values will still apply but be subtracted by the 10px padding of the #mainContent and your borders remain inside the desired area.
Here's the correct solution : http://jsfiddle.net/5L4tnwtg/
The changes:
Add:
*{
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
}
Modify:
#mainContent {
height: 100%;
width:100%;
padding: 10px;
}
#platter {
border: 1px solid black;
height: 100%;
width: 100%;
}
I have this table with three cells in the first row. I'm trying to create a design that will bring down the last cell if there is no space. So something like 2 on top, 1 below. And as the window gets even small 1 on each row. I'm having trouble finding anything like this.
I was able to get a responsive design to stack all cells on top of each other depending on size but if I could find a better solution that would be nicer.
HTML:
<table id="dashboard" cellpadding="0" cellspacing="0">
<tr>
<td id="TopLeft"><div class='chartLoadingOverlay'>Loading chart please be patient...</div></td>
<td id="TopRight"><div class='chartLoadingOverlay'>Loading chart please be patient...</div></td>
<td id="BottomLeft"><div class='chartLoadingOverlay'>Loading chart please be patient...</div></td>
</tr>
</table>
CSS:
#dashboard{
border-collapse: separate;
border-spacing: 5px 5px;
border: 5px solid red;
background-color: blue;
}
div.chartLoadingOverlay{
font-style:italic;
color:gray;
border:1px silver solid;
background-color:#F5F5F5;
line-height:250px;
height:250px;
width:500px;
text-align:center;
margin:2px;
}
#media only screen and (max-width: 1000px){
/* Force table to not be like tables anymore */
#dashboard table{
width: 100%;
border-collapse: collapse;
border-spacing: 0;
display: block;
position: relative;
width: 100%;
}
#dashboard tbody {
/*display: block;*/
width: auto; position: relative;
overflow-x: auto;
white-space: nowrap;
}
#dashboard tbody tr {
display: inline-block;
vertical-align: top;
}
#dashboard td {
display: block;
}
}
That's not possible. But even if it were doable, a more elegant solution would be to stack 3 divs side-by-side and responsively put them one below the other. Check this Bootstrap example for something quite similar to what you want.
Tables should not be used for responsive design...
Store this to make it a thumb rule : http://shouldiusetablesforlayout.com/
You can try something like this to make DIV structure and make that responsive:
<div id="container">
<div id="col_left"> something here</div>
<div id="col_mid"> something here </div>
<div id="col_mid"> something here</div>
<div style="clear: both"></div>
</div>
CSS:
#container
{
width: 100 %;
clear: both;
border: 1px solid #CCC;
}
#col_left
{
float: left;
width: 20%;
margin: 0 5px 0 0;
border: 1px solid #CCC;
}
#col_mid
{
float: left;
width: 20%
margin: 0 5px 0 0;
border: 1px solid #CCC;
}
#col_right
{
float: right;
width; 35%;
margin: 5px;
border: 1px solid #CCC;
}
you can refer this http://jsfiddle.net/aasthatuteja/awvck/
You can change display like this http://jsfiddle.net/Yr22s/1/
BUT, it effectively changes your table to be div
sorry i dont think this is possible ..actually its not posiible...you cant break a tabular design...
what does a row mean???its a collection of cells...so one row will always contain a particular number of cells...you cant change number of cells in a row depending on screen width..its fixed...
for example consider this table in image
now if your screen width gets too small to accommodate its total width then it will overflow horizontally and horizontal scroll bar will be introduced...and if one cell gets too tall then row size will take the height of tallest cell and rest of the cell will be aligned vertically middle by default...you cant change this property dynamically depending on screen size
what you can do is ..define there width using %..so it wil grow or shrink according to screen width...
this is one reason(actually there are many) why you should avoid tabular design..use container(<div>) to design your website
I have a table TD and on the right of it I want to add a 1 pixel border, so I've done this:
table td {
border-right:1px solid #000;
}
It works fine but the problem is that the border's height takes the total TD's height.
Is there a way to set the height of the border?
I have another possibility. This is of course a "newer" technique, but for my projects works sufficient.
It only works if you need one or two borders. I've never done it with 4 borders... and to be honest, I don't know the answer for that yet.
.your-item {
position: relative;
}
.your-item:after {
content: '';
height: 100%; //You can change this if you want smaller/bigger borders
width: 1px;
position: absolute;
right: 0;
top: 0; // If you want to set a smaller height and center it, change this value
background-color: #000000; // The color of your border
}
No, there isn't. The border will always be as tall as the element.
You can achieve the same effect by wrapping the contents of the cell in a <span>, and applying height/border styles to that. Or by drawing a short vertical line in an 1 pixel wide PNG which is the correct height, and applying it as a background to the cell:
background:url(line.png) bottom right no-repeat;
Yes, you can set the line height after defining the border like this:
border-right: 1px solid;
line-height: 10px;
For td elements line-height will successfully allow you to resize the border-height as SPrince mentioned.
For other elements such as list items, you can control the border height with line-height and the height of the actual element with margin-top and margin-bottom.
Here is a working example of both:
http://jsfiddle.net/byronj/gLcqu6mg/
An example with list items:
li {
list-style: none;
padding: 0 10px;
display: inline-block;
border-right: 1px solid #000;
line-height: 5px;
margin: 20px 0;
}
<ul>
<li>cats</li>
<li>dogs</li>
<li>birds</li>
<li>swine!</li>
</ul>
Building on top of #ReBa's answer above, this custom-border class is what worked for me.
Mods:
working with border instead of backaground-color since background-color is not consistent.
Setting height & top of the properties of :after in such a way that the total comes up to 100% where bottom's value is implicit.
ul {
list-style-type: none;
display: flex;
flex-direction: row;
}
li {
padding: 10px;
}
.custom-border {
position: relative;
}
.custom-border:after {
content: " ";
position: absolute;
border-left: 1px #6c757d solid;
top: 35%;
right: 0;
height: 30%;
margin-top: auto;
margin-bottom: auto;
}
<ul>
<li class="custom-border">
Hello
</li>
<li class="custom-border">
World
</li>
<li class="custom-border">
Foo
</li>
<li class="custom-border">Bar</li>
<li class="custom-border">Baz</li>
</ul>
Good Luck...
No, you cannot set the border height.
This will add a centered border to the left of the cell that is 80% the height of the cell. You can reference the full border-image documentation here.
table td {
border-image: linear-gradient(transparent 10%, blue 10% 90%, transparent 90%) 0 0 0 1 / 3px;
}
Just like everyone else said, you can't control border height.
But there are workarounds, here's what I do:
table {
position: relative;
}
table::before { /* ::after works too */
content: "";
position: absolute;
right: 0; /* Change direction for a different side*/
z-index: 100;
width: 3px; /* Thickness */
height: 10px;
background: #555; /* Color */
}
You can set height to inherit for the height of the table or calc(inherit - 2px) for a 2px smaller border.
Remember, inherit has no effect when the table height isn't set.
Use height: 50% for half a border.
Demo
table {
border-spacing: 10px 0px;
}
.rightborder {
border-right: 1px solid #fff;
}
Then with your code you can:
<td class="rightborder">whatever</td>
Hope that helps!
Currently, no, not without resorting to trickery. borders on elements are supposed to run the entire length of whatever side of the element box they apply to.
.main-box{
border: solid 10px;
}
.sub-box{
border-right: 1px solid;
}
//draws a line on right side of the box.
later add a margin-top and margin-bottom.
i.e.,
.sub-box{
border-right: 1px solid;
margin-top: 10px;;
margin-bottom: 10px;
}
This might help in drawing a line on the right-side of the box with a gap on top and bottom.
table td {
border-right:1px solid #000;
height: 100%;
}
Just you add height under the border property.