CSS table column autowidth
Given the following how do i make my last column auto size to its content? (The last column should autosize-width to the content. Suppose i have only 1 li element it should shrink vs. having 3 li elements etc):
table {
table-layout: fixed;
width: 100%;
}
table tr {
border-bottom: 1px solid #e9e9e9;
}
table thead td,
th {
border-left: 1px solid #f2f2f2;
border-right: 1px solid #d5d5d5;
background: #ddd url("../images/sprites4.png") repeat-x scroll 0 100%;
font-weight: bold;
text-align: left;
}
table tr td,
th {
border: 1px solid #D5D5D5;
padding: 15px;
}
table tr:hover {
background: #fcfcfc;
}
table tr ul.actions {
margin: 0;
}
table tr ul.actions li {
display: inline;
margin-right: 5px;
}
<table cellspacing="0" cellpadding="0" border="0">
<thead>
<!-- universal table heading -->
<tr>
<td class="tc first"><input type="checkbox" value="true" name="data-1-check-all" id="data-1-check-all"></td>
<td class="tc">Type</td>
<th>File</th>
<th>Sample</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>Division 1</td>
<td>Division 2</td>
<td>Division 3</td>
<td>Division 4</td>
<td>Division 5</td>
</tr>
<tr>
<td>Division 1</td>
<td>Division 2</td>
<td>Division 3</td>
<td>Division 4</td>
<td class="last">
<ul class="actions">
<li><a class="iconStats" href="#">Statystyki</a></li>
<li><a class="iconEdit" href="#">Edytuj</a></li>
<li><a class="iconDelete" href="#">Usuń</a></li>
</ul>
</t开发者_高级运维d>
</tr>
</tbody>
</table>
The following will solve your problem:
td.last {
width: 1px;
white-space: nowrap;
}
Flexible, Class-Based Solution
And a more flexible solution is creating a .fitwidth
class and applying that to any columns you want to ensure their contents are fit on one line:
td.fitwidth {
width: 1px;
white-space: nowrap;
}
And then in your HTML:
<tr>
<td class="fitwidth">ID</td>
<td>Description</td>
<td class="fitwidth">Status</td>
<td>Notes</td>
</tr>
If you want to make sure that last row does not wrap and thus size the way you want it, have a look at
td {
white-space: nowrap;
}
You could specify the width of all but the last table cells and add a table-layout:fixed and a width to the table.
You could set
table tr ul.actions {margin: 0; white-space:nowrap;}
(or set this for the last TD as Sander suggested instead).
This forces the inline-LIs not to break. Unfortunately this does not lead to a new width calculation in the containing UL (and this parent TD), and therefore does not autosize the last TD.
This means: if an inline element has no given width, a TD's width is always computed automatically first (if not specified). Then its inline content with this calculated width gets rendered and the white-space
-property is applied, stretching its content beyond the calculated boundaries.
So I guess it's not possible without having an element within the last TD with a specific width.
use auto and min or max width like this:
td {
max-width:50px;
width:auto;
min-width:10px;
}
精彩评论