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.
Related
I've been trying to achieve the following using only html and css but I can't seem to get it right.
Consider the following image:
The image shows two desired outputs depending on their pseudo media queries min-width: X and max-width: X. It doesn't really matter what the media queries are, what is important is that the structure is able change so the output matches that of the image.
So what I've been struggling with is to have single-lined texts in the grey containers marked 'a' and have these containers have the same width relative to the largest of the two. The width of 'a' accomidate texts of variable lengths, not more not less. I also want 'a' to be lined out to the left as much as possible.
Remember I'm trying to accomplish this using only HTML and CSS.
Ended up solving my problem with using a table. The key lay in changing the display property of the td elements.
table {
width:300px;
background-color:#4192AD;
margin-bottom:30px;
}
td {
height:20px;
}
td:first-child{
width:1%;
white-space:nowrap;
text-align:right;
background-color:#C6C6C6;
}
td:nth-child(2) {
background-color:#73AD5A;
}
.alternate td {
display:block;
width:auto;
text-align:left;
}
<table>
<tbody>
<tr>
<td>short-text</td>
<td></td>
</tr>
<tr>
<td>relatively-long-text</td>
<td></td>
</tr>
</tbody>
</table>
<table class='alternate'>
<tbody>
<tr>
<td>short-text</td>
<td></td>
</tr>
<tr>
<td>relatively-long-text</td>
<td></td>
</tr>
</tbody>
</table>
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 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
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 want to make my form to look neat and I want my cells to be different sizes depending on the information in the cell. How do I make a cell width different then the one above it?
OK now i also want to know how to make 1 cell tall and have a lot of small cells to the right of it.
Example:
<html>
<table border="1"><td width="50">some info</td><td width="50">some more info</td>
<tr>
<td width="250">Lots more text and information in this box then the first cell</td><td> other information</td>
I don't want the first cell in the first row to automatically resize to the length of the first cell in the second row.
Example:
|some info|some more info|
|Lots more text and information in this box then the first cell|other information|
or is there at least another way to lay this out that would look clean?
All column in table always have similar width (you can't change it), you can only add one more cell and span some amount of cells in second row.
<html>
<table border="1">
<tr>
<td width="50">some info</td>
<td width="50">some more info</td>
<td></td>
<td></td>
</tr>
<tr>
<td width="250" colspan="3">Lots more text and information in this box then the first cell</td>
<td> other information</td>
Try this -- use DIVs to simulate table rows and columns, and the CSS min-width property to create "cells" that can stretch as needed.
http://jsfiddle.net/HN4YS/1/
html:
<div class="row"><div class="col1">some info</div><div class="col2">some more info</div></div>
<div class="row"><div class="col1">Lots more text and information in this box then the first cell</div><div class="col2">other information</div></div>
css:
.col1, .col2 {
display: inline-block;
min-width: 150px;
border: 1px solid;
padding: 4px;
}
.row {
white-space: nowrap;
}