I can't seem to find a way to do this without using Javascript.
Let's say I have a <table>, and I don't know the potential width of the content that populates the first column. The <table> has width:100% so that the rest of the columns can resize as neccssary, but I'd like to keep the first column with a fixed width so that it doesn't grow larger than the content.
Is this possible without Javascript?
<table>
<tr>
<th>Dynamic content column of unknown width</th>
<th>Some other column that is allowed to grow/shrink</th>
</tr>
<tr>
<td>Lorem ipsum ...</td>
<td>195383 ...</td>
</tr>
</table>
It seems that by setting the width of the dynamic content column to 1px, the column width will be fixed to the width of the content in the column, and still allow the other column to grow/shrink with the table.
To set a fixed width for the first column:
tr th:first-child, tr td:first-child {
width: 200px;
}
Related
I have two tables inside a table :
<table>
<tbody>
<tr>
<td class="tdkqtb">
<table border="1">
<tbody>
<tr>
<th>Giải</th>
<th>#cityID</th>
</tr>
</tbody>
</table>
</td>
<td class="tdkqtb">
<table border="1">
<tbody>
<tr>
<th>Đầu</th>
<th>Đuôi</th>
</tr>
</tbody>
</table>
</td>
</tr>
<tr></tr>
</tbody>
</table>
Now I need to set the width of the two tables fixed. How can I do that? For example I want all tables to have the same width as the first twos. I mean they must have a fixed width for each column, the first table will contains 70% width of the parent table, and the second contains the rest. The columns in the two tables must have fixed width too!
Not sure if I understood what you want but you can just select the required element of the table or the whole table and give a width in css
table {
width: 70%;
}
If you have multiple tables, give them ids or classes to seperate for different styles. Same for the th, tr, td and so on.
First of all, why not going Tableless?
Then you have to put some CSS into it, like DasBoot said, to give a full table a width you should do this:
table {
width: 70%;
}
The same thing for specific td, tr, th or whatever element you want to style. If what you are going for is a maximum width or a minimum width you can use max-width and min-width appropriately. Why not put this code on a jsfiddle and test the results live to see what you need to do?
Regards.
I have some text in table column which is greater than the column width I want. So text is overflowing from it. So I apply overflow:auto but in this case it is showing scroll on every page where data is less than the width of the column.
I don't want to show the scroll on that page where data is less than the width of column just want to show only where data is greater than its length.
Does any one have some suggestions?
<td style=" width:50%;overflow:auto;>
Try to wrap td content in div with fixed width and overflow: auto
For example:
<table>
<tr>
<td>some content</td>
<td> <!-- your fixed width column -->
<div style="width: 100px; overflow: scroll;">
Loremipsumdolorsitametconsectetuadipisicingelit
</div>
</td>
</tr>
</table>
use this <td style=" width:50%;overflow:scroll;">
This will insert horizontal and vertical scrollbars.
They will become active only if the content requires it.
<table>
<tr>
<td>Test</td>
<td>A long string blah blah blah</td>
</tr>
</table>
<style>
td{max-width:67%;}
</style>
The above does not work. How can I set the max-width of a table cell using percentages?
Old question I know, but this is now possible using the css property table-layout: fixed on the table tag. Answer below from this question CSS percentage width and text-overflow in a table cell
This is easily done by using table-layout: fixed, but a little tricky because not many people know about this CSS property.
table {
width: 100%;
table-layout: fixed;
}
See it in action at the updated fiddle here: http://jsfiddle.net/Fm5bM/4/
According to the definition of max-width in the CSS 2.1 spec, “the effect of 'min-width' and 'max-width' on tables, inline tables, table cells, table columns, and column groups is undefined.” So you cannot directly set max-width on a td element.
If you just want the second column to take up at most 67%, then you can set the width (which is in effect minimum width, for table cells) to 33%, e.g. in the example case
td:first-child { width: 33% ;}
Setting that for both columns won’t work that well, since it tends to make browsers give the columns equal width.
I know this is literally a year later, but I figured I'd share. I was trying to do the same thing and came across this solution that worked for me. We set a max width for the entire table, then worked with the cell sizes for the desired effect.
Put the table in its own div, then set the width, min-width, and/or max-width of the div as desired for the entire table. Then, you can work and set width and min-widths for other cells, and max width for the div effectively working around and backwards to achieve the max width we wanted.
#tablediv {
width:90%;
min-width:800px
max-width:1500px;
}
.tdleft {
width:20%;
min-width:200px;
}
<div id="tablediv">
<table width="100%" border="1">
<tr>
<td class="tdleft">Test</td>
<td>A long string blah blah blah</td>
</tr>
</table>
</div>
Admittedly, this does not give you a "max" width of a cell per se, but it does allow some control that might work in-lieu of such an option. Not sure if it will work for your needs. I know it worked for our situation where we want the navigation side in the page to scale up and down to a point but for all the wide screens these days.
the percent should be relative to an absolute size,
try this :
table {
width:200px;
}
td {
width:65%;
border:1px solid black;
}
<table>
<tr>
<td>Testasdas 3123 1 dasd as da</td>
<td>A long string blah blah blah</td>
</tr>
</table>
Currently, I have a table that looks like
<table>
<tr>
<th>Submitted</th>
<th>Title</th>
<th>Revisions</th>
</tr>
<tr>
<td>Nov. 22, 2011, 2:14 a.m.</td>
<td>Hello</td>
<td>2</td>
</tr>
</table>
I need the Title column to be as wide as possible while the other columns are just enough to contain their content. I also need the table to fill its container (100% width).How can this be achieved?
It is probably a quick and dirty hack, but you can simply use the following CSS:
td, th {
white-space: nowrap; /* to prevent splitting content into several lines */
}
th:nth-of-type(2) {
width: 100%;
}
There is no way that cells inside table can exceed its overall width, so it may work.
Alternatively you can use JavaScript to calculate middle column width dynamically or set fixed cells width.
I have a table with two columns and one row, and 100% width across the screen. I want the first column to take up as much space as the content in it will fill. This content shouldn't take up the entire screen, so I'm not worried about wrapping. I then want the second cell to take up the remainder of the horizontal space.
How would I go about setting up this table? I've tried many different combinations of setting the widths on the two cells to no avail.
Setup your CSS as follows:
table {
width: 100%;
}
td.firstCol {
width: 1%;
white-space: nowrap;
}
And your table markup like so:
<table>
<tr>
<td class="firstCol">
First column content
</td>
<td>
Second column content
</td>
</tr>
</table>
And that should do the trick.