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.
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 a couple table header cells that have wrapped text, which I'm fine with. However, the headers have a background color and it looks awkward having different heights between ones that are single line, and others that are 2 lines (wrapped).
Can I make the headers to be a certain height so the cells containing a single line of text will be the same height as the cells that have 2 lines? I don't want to use no-wrap because I'd like to maintain the table's current width.
When I change the line-height, that makes the spacing increase on the wrapped cells too, so basically the header cells are still different heights.
<table class = "large_headers">
<tr>
<th>Test1</th>
<th>Test2</th>
</tr>
<tr>
<td>abc</td>
<td>def</td>
</tr>
</table>
.large_headers th{
display: table-cell;
}
Your markup is invalid. Try this:
<table class = "large_headers">
<tr>
<th>Test1 foobar foobar</th>
<th>Test2</th>
</tr>
<tr>
<td>abc</td>
<td>def</td>
</tr>
</table>
With this CSS:
.large_headers th{
background-color:red;
width:20px;
}
Fiddle here: http://jsfiddle.net/wLEu8/
ths should belong in a tr like a td.
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;
}
I'm trying to create this table layout. Basically the orange 18 you see in the grid means 18% usage between 11am and 12pm on Tuesday. So that's why the hours along the top are best on the edges of the table cell, not in the middle of the cell. That way it's showing the data representing usage over a one hour time range.
I have basically applied a basic hack and right aligned the hours along the top so they kinda look like they're inbetween the cells. This isn't perfect as you can see.
What I want to do is actually have the hours along the top centered nicely between the data cells. I think I could do it with a fixed size column widths, but the table needs to stretch to 100% of the page width and the column widths a percentage. Then it's scalable down to a smaller browser.
Is there a way to do this in HTML and CSS?
To have the first row truly centered between the bottom cells with a single table you can use colspan + widths in percentages without using positioning. That way it will be fluid, it will work with any font, and it won't get screwed when you use 2 digit numbers.
HTML:
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td> </td>
<th colspan="2">1</th>
<th colspan="2">1</th>
<th colspan="2">1</th>
<th colspan="2">1</th>
<th colspan="2">1</th>
<td> </td>
</tr>
<tr>
<td colspan="2">0</td>
<td colspan="2">0</td>
<td colspan="2">0</td>
<td colspan="2">0</td>
<td colspan="2">0</td>
<td colspan="2">0</td>
</tr>
</tbody>
</table>
CSS:
table {
text-align: center;
width: 70%;
}
table td {
width:8.33%; // 100% divided by (double the number of bottom cells)
}
table th {
width:16.66%; // 200% divided by (double the number of bottom cells)
}
table td[colspan="2"] {
background:yellow;
}
table td,
table th {
outline:1px solid tan;
}
Demo: http://jsfiddle.net/G7KZe/
You could use position: relative; to place your month numbers to be where you want but it's tricky because table cells often behave weirdly with CSS positioning. And the exact positioning can depend on the font used.
I've come up with a solution that requires 2 tables. The idea is to have one table for the headings, one table for the content. The trick is to have 1 cell less in the headings.
Live example: http://jsfiddle.net/w6TnE/
As you can see, the month numbers are perfectly aligned with the borders. But keep in mind that this setup requires a fixed width, in this case, 60px:
td, th{ border:1px solid #ccc; padding:5px 0; text-align:center; width:60px;}
I just added some additional styling to make it clear.
You can use an absolutely positioned element inside a relatively positioned element to get the effect you want. The idea is to style the <th> elements with position: relative and then style the hour numbers themselves in an element with position: absolute. You can then position the numbers anywhere you want in relation to the cell.
Here is an example jsfiddle. To adjust the position of the numbers you may want to use a pixel value instead of a percentage for the right property in the th > span block.
For more information, you might want to read about the different positioning methods.
table td{ text-align:center;}
This will align the text of each cell to the center.
You could always wrap each of the table heading text in like a <div> tag and use the css position:relative and left:2px or whatever number of pixels to make it look good.
example
<table>
<tr>
<th style="text-align:right;"><div style="position:relative;left:2px;">1</div></th>
</tr>
</table>
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.