I'm trying to fix a table header to the top of a window, but for some reason setting the widths of the <td> and <th> elements in the following way doesn't result in the elements having the same width (the column headers are not aligned with the other column cells):
th, td {
padding-left: 20px;
}
td:first-child, th:first-child {
width: 80px;
}
td:nth-child(2), th:nth-child(2) {
width: 200px;
}
td:last-child, th:last-child {
width: 320px;
padding-right: 20px;
}
Here's a jsfiddle example that illustrates this: http://jsfiddle.net/zgaPw/1/
After experimenting with it, I found that the font-size property seems to affect the width of the <td>, but I'm not sure why or how to correct it.
Can someone shed some light as to what is wrong and how to correct it? Thanks!
The width of cells are affected by their siblings (other cells), and the parent (<table>). To get the cells have the same width, define a width property on the cell which is equal to:
For each cell:
width + padding left + padding right
= 660px;
At your first row, containing the <th> elements, you have defined a width of 600px, which causes the head to shrink a little. To fix this, remove the width property on the row, or define width:660px;.
Fiddle: http://jsfiddle.net/zgaPw/4/
Related
I have a 100% width table of which I want the right most column (D) to take only the minimum required width, but still stuck to the right with the other columns (B, C) fill up the rest of the space. (A is fixed width).
How can I do this with CSS?
Use this code:
table td:first-child { width: 50px; }
table td:last-child { width: 1px; white-space: nowrap; }
This takes advantage of the standard cell behaviour of being at least as wide as the non-wrappable content.
I am making a simple table to display information and wanted a border at the bottom of each row. I collapsed the borders to remove the space between the rows as to avoid the doubling of borders. And it works fine but when I adjust the screen size sometimes the border seems to break or buckle where it gets displaced slightly. I'm attaching an image of the phenomenon.
Here is the whole table as well:
And here is my CSS:
table{
border-collapse: collapse;
}
tbody{
width: 100% !important;
}
th{
width: 8%;
padding-left: 4%;
font-size: 1.5vw;
padding-top: 2%;
}
td{
width: 20%;
font-size: 1.5vw;
padding-top: 2%;
}
td ul {
width: 90%;
}
td ul li {
padding-top: 10%;
text-align: center;
padding-bottom: 10%;
}
tr{
border-bottom: solid 1px black !important;
}
Is there any way around this? Or is it more a matter of my content?
Your table row borders work only as a side-effect of conflict-resolution in the border-collapse algorithm. A table row is not meant to have borders, but since the style is applied, and borders are collapsed, the browser attempts to resolve any potentially conflicting styles by applying border styles of the parent to the respective cells it houses.
What's actually being rendered is a series of cells of slightly varying height, each with its own bottom border resolved from the value taken from the parent tr element.
One alternative might be to wrap the first row with a thead element and each successive row with a tbody element, and then set them to display: block with border-bottom.
You can work out some different solutions, but the main issue here is just a misunderstanding of how borders work on table elements, and the W3C link should help to sort that out.
At small sizes this table becomes impossible to read, so I'd also recommend that you read Richard Rutter on designing tables to be read, and also avoid using percentage and viewport-based units for font-size and padding.
I have a table that has fixed width, and inside the table I need to have some inputs(text) that has the same width of the table, but I don't want the text of the inputs to be at left:0, I want them to have some padding from the left. But when I put the padding to those inputs the width changes to more than 100%.
Here the HTML:
<table cellspacing="25">
<tr>
<td><input type="text" placeholder="lalala"></td>
</tr>
</table>
And this is the CSS.
table {
background-color: red;
width: 300px;
}
table input {
width: 100%;
padding-left: 10px;
}
How can I ensure that the width of the input element is 100% the width of the table cell?
Check the fiddle
add this css rule to your input:
box-sizing: border-box;
The box-sizing property is used to tell the browser what the sizing
properties (width and height) should include.
Should they include the border-box? Or just the content-box.
Here is a snippet:
table {
background-color: red;
width: 300px;
}
table input {
width: 100%;
padding-left: 10px;
box-sizing: border-box;
}
<table cellspacing="25">
<tr>
<td><input type="text" placeholder="lalala"></td>
</tr>
</table>
You can use box-sizing: border-box; (support) in which "The width and height properties include the padding and border, but not the margin." in your CSS for the specified elements as #1l13v has done in his answer:
table input {
box-sizing: border-box;
}
Or you can use the calc function (support):
table input {
width: calc( 100% - 10px );
}
Another option would be to calculate the width and padding of the input with percentages. If the sum of the content, border, margin, and padding of the element is 100% then it should fit how you would like. See the box-model concept in css: http://www.w3schools.com/css/css_boxmodel.asp
All HTML elements can be considered as boxes. In CSS, the term "box
model" is used when talking about design and layout.
The CSS box model is essentially a box that wraps around HTML
elements, and it consists of: margins, borders, padding, and the
actual content.
The box model allows us to add a border around elements, and to define
space between elements.
For example, if you want 10% padding on the left then the width should be 90%.
See this fiddle: http://jsfiddle.net/3nk07y1x/1/
CSS:
table {
background-color: red;
width: 300px;
}
table input {
width: 90%;
padding-left: 10%;
}
The width of the table will be the width plus the padding. Try subtracting some percentage points from the width like this:
table input {
width: 90%;
padding-left: 1em;
}
I would also change pixels to ems, because these are a little bit more stable on different screen resolutions.
I have the following table:
<table>
<tbody>
<tr>
<td colspan="2">
<img src="http://www.sherv.net/cm/emoticons/cats/cat-headphones-smiley-emoticon.gif" />
<img src="http://www.beaukit.com/catgrpbl.jpg" />
</td>
</tr>
</tbody>
</table>
and the following CSS:
table {
width: 40%;
background-color:grey;
text-align: center;
margin-bottom: 20px;
}
img {
max-width: 100%;
margin: 0 0 0.8em 0;
max-height: 800px !important;
width: auto !important;
height: auto;
}
See Jsfiddle
What I want is that the pictures in the cell fill its width if they are bigger than the cell itself. In case the pictures are smaller, they should keep maintain their native width expressed via max-width. This seems to work well in Chrome, but when I try it in firefox the bigger pictures stretch the width of the cell.
While, if I change the width of the images to: width: 100% !important;, the smaller picture are streched to fill the cell (see table.two).
How can I solve the issue?
try adding
table {
table-layout:fixed;
}
Table cells don't behave like block elements, their widths and heights are defined by the content inside them. From the I.E. documentation:
auto: Default. Column width is set by the widest unbreakable content in the column cells.
fixed: Table and column widths are set either by the sum of the widths on the col objects or, if these are not specified, by the width of the first row of cells. If no width is specified for the table, it renders by default with width=100%.
You have use width auti !important which you should not be to
table tr, table tr td{
width:100%
}
table tr td a{
width:100%;
display:block;
}
img {
width: 100%;
}
Check on Fiddle
I have a table row with two cells inside, the height is different because the data inside changes, so I cannot set an explicit height.
The two cells contain div's and are likely to be different heights due to the content inside, my question is is it possible to have a cell take up 100% height so they both cells match?
It's a bit vague in text form, so here's an example.
The second cell and div should match the height of the first.
Unfortunately I've tried setting the height to 100% without success.
td, div {
height:100%;
}
In order to use the 'height:100%' tag, all parents also are required to have a height value set.
For example, see here:
td {
width:100px;
vertical-align:top;
}
table, tr, td{
height: 100%;
}
td div {
background-color:grey;
height: 100%;
}
can't you put background color in the TD??
But if you want div to expand, you can do this
div {
background-color: grey;
display: inline-block;
height: 100%;
}