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.
Related
I have a table with width:100% and it should have 3 columns as follows:
[50%-space/2][space][50%-space/2]
Now, I have this already
<table style="width:100%"><tr>
<td>left</td>
<td style="width:20px"></td> //space
<td>right</td>
</table>
This works fine, as long as there is always a "left" and "right" width the same width, but it stops working if one has a different width:
<table style="width:100%"><tr>
<td></td>
<td style="width:20px"></td> //space
<td>right</td> // right takes all the space from the first td
</table>
And if I set "left" and "right" each to 50%, the space in between is omitted:
<table style="width:100%"><tr>
<td style="width:50%"></td>
<td style="width:20px"></td> //space
<td style="width:50%">right</td> // right takes all the space from the first td
</table>
Unfortunately, the space cannot be in % in this case (which would solve the problem easily). Also using CSS columns is not (yet) an option.
Is there a solution for this?
JSFiddle
Example: http://jsfiddle.net/9yVx9/1/
use table-layout: fixed property
table {
table-layout:fixed;
}
Screenshot
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'm making a tabular layout and I really need:
2 columns, of variable width
columns have the same width
columns are no wider than necessary
I have found that "table-layout: fixed" can achieve this, if I set both columns to have "width: 50%". Here's an example:
CSS:
.mytable {
border-collapse: collapse;
table-layout: fixed;
}
.fifty {
width: 50%;
}
HTML:
<table class="mytable" border=1>
<tr>
<td class="fifty">hello</td>
<td class="fifty">x</td>
</tr>
<tr>
<td class="fifty">a</td>
<td class="fifty">longer</td>
</tr>
<tr>
<td class="fifty">reallyreallylong</td>
<td class="fifty">medium</td>
</tr>
</table>
This is exactly what I want, and I'm happy, except that everything goes out the window when this table appears within another table. In that case, all columns shrink to the minimum possible size (at least for my version of Chrome).
Here is a jsFiddle demonstrating my dilemma: http://jsfiddle.net/KTkZm/
Can anyone shed light on this, and hopefully find a way to get the inner table to render as it does outside of the table? Thanks!
Check below jsfiddle link. It's Working Fine.
http://jsfiddle.net/KTkZm/14/
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 to dynamically create a table with a variable number of columns, determined at runtime.
Can somebody tell me if it's possible to have a html table with equal size columns that are fully stretched?
If you don't know how many columns you are going to have, the declaration
table-layout: fixed
along with not setting any column widths,
would imply that browsers divide the total width evenly - no matter what.
That can also be the problem with this approach, if you use this, you should also consider how overflow is to be handled.
<table width="400px">
<tr>
<td width="100px"></td>
<td width="100px"></td>
<td width="100px"></td>
<td width="100px"></td>
</tr>
</table>
For variable number of columns use %
<table width="100%">
<tr>
<td width="(100/x)%"></td>
</tr>
</table>
where 'x' is number of columns
ALL YOU HAVE TO DO:
HTML:
<table id="my-table"><tr>
<td> CELL 1 With a lot of text in it</td>
<td> CELL 2 </td>
<td> CELL 3 </td>
<td> CELL 4 With a lot of text in it </td>
<td> CELL 5 </td>
</tr></table>
CSS:
#my-table{width:100%;} /*or whatever width you want*/
#my-table td{width:2000px;} /*something big*/
if you have th you need to set it too like this:
#my-table th{width:2000px;}
Just add style="table-layout: fixed ; width: 100%;" inside <table> tag and also if you do not specify any styles and add just style=" width: 100%;" inside <table> You will be able to resolve it.
table {
width: 100%;
th, td {
width: 1%;
}
}
SCSS syntax