<table>
<colgroup>
<col>
<col style='text-align:right'>
</colgroup>
<tbody>
<tr>
<td>Sample text</td>
<td>This text should be right-aligned</td>
</tr>
<tr>
<td></td>
<td>
<div id='spacer' style='width:100px'>
I'm a spacer
</div>
</td>
</tr>
</tbody>
</table>
Results in text that isn't right aligned. If the same style is applied to the td element it works fine. How do I right-align text in a column without having to apply a style to every td element?
Add the following CSS:
table.tableClass tr td:nth-child(2) {
text-align: right;
}
the number after nth-child( is the column, so for this case it would be 2 because it's the second column. Fiddle: http://jsfiddle.net/p97vdo2p/1/
HTML isn't rendered by column, it's rendered by rows. That's why there <tr></tr> (table rows) exist, but <tc></tc> (table columns) do not. That being said, the easiest way to style a column in HTML, is by applying the same CSS class to every <td></td> in the given column. You can type in the same class to every one manually, or you could write it programmatically, via javascript or a server-side script.
Related
<tr>
<td></td>
<td colspan="3">Susi Handayani Jl. Kebangsaan No.225 300.000</td>
</tr>
How to merge the two td to be inside one Td, but it's not sticking together, merged but I want the word to not stick together beside, make some space from the deleted td to be the same column as above
I tried align but it didn't Work, I've also tried dividing the tr and tried removing td for one paragraph and it still sticks with the second paragraph (td), what I'd expect is the td not to stick together but to align the text above the text that I've made
<h3>Tabel HTML</h3>
<table>
<caption>Tabel Simpanan Peserta</caption>
<thead>
<tr>
<th>No</th>
<th>Nama Peserta</th>
<th>Alamat</th>
<th>Simpanan</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="3">Total</td>
<td>350.000</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>1.</td>
<td>Andi Suryono</td>
<td>Jl. Kemerdekaan No.17</td>
<td>50.000</td>
</tr>
<tr>
<td>2.</td>
<td colspan="3">Susi Handayani
Jl. Kebangsaan No.225
300.000</td>
</tr>
<tr>
<td>3.</td>
<td>Roy Pratama</td>
<td>Jl. Merdeka No.32</td>
<td>1.000.000</td>
</tr>
</tr>
<tr>
<td>4.</td>
<td>Tia Suryani</td>
<td>Jl. Jelajah No.111</td>
<td>1.555.000</td>
</tr>
</tbody>
</table>
I'm trying to make the table fused but not sticking together, I'm planning to give the word some space and how do I make the space for each column
You're talking about styling, yet you posted no style tag or CSS whatsoever. Post the general CSS you have, to reproduce the problem, or at least a screenshot of what the problem is.
Generally, spacing in tables comes with padding. Try something like:
<style>
td {
padding: 5px 10px;
}
</style>
This will put 5px top and bottom and 10px from both sides of every cell in the table.
I have a HTML table as follows:
<table border="1">
<tr>
<td>Row with text</td>
</tr>
<tr>
<td></td><!-- Empty row -->
</tr>
</table>
When you run this you'll see the second row is collapsed, but I'd rather it was rendered uncollapsed, with the same height as the first row. One way of doing this is to put a entity, as follows:
<table border="1">
<tr>
<td>Row with text</td>
</tr>
<tr>
<td> </td><!-- Empty row -->
</tr>
</table>
Is there a way I can achieve the second result, via CSS, using the HTML from the first snippet?
You can use this code:
td:empty::after{
content: "\00a0";
}
It adds escaped after every originally empty td, solving your issue.
td:empty::after{
content: "\00a0";
}
<table border="1">
<tr>
<td>Row with text</td>
</tr>
<tr>
<td></td><!-- Empty row -->
</tr>
<tr>
<td>asd</td>
</tr>
<tr>
<td>dees</td>
</tr>
<tr>
<td></td><!-- Empty row -->
</tr>
</table>
Learn more about escaping HTML entities here.
You can add height to table-cell, in this case it'll work like min-height property for other elements (with display: block, display: inline-block, etc). I added another table row with long text to demonstrate it:
td {
height: 22px;
}
<table border="1">
<tr>
<td>Row with text</td>
</tr>
<tr>
<td></td><!-- Empty row -->
</tr>
<tr>
<td>Very-very long text with many words, Very-very long text with many words, Very-very long text with many words, Very-very long text with many words, Very-very long text with many words</td>
</tr>
</table>
You can't use min-height property, because the specification says:
In CSS 2.1, the effect of 'min-height' and 'max-height' on tables, inline tables, table cells, table rows, and row groups is undefined.
Try adding to your table CSS formatting like
table.someclass tbody td {
white-space:nowrap;
min-width:30px;
vertical-align:top;
}
This will make all empty cells equal and at least 30px wide.
Things like , nowrap and CSS content appending like content: "\00a0"; didn't work for me.
How can I change the background color for a single column in html? I have several html pages linked to a css file with a 12-column grid, and I to change the background of one column in some of the html pages to a different color than the regular background color (white), but not the other columns. Also, I would like to change the text color of this column. How can I do that?
Pertinent to the HTML table element, it can be achieved as shown in the following sample:
<table>
<tr>
<td></td>
<td style="background-color:#909090;"></td>
<td></td>
</tr>
</table>
or, in more sophisticated way using CSS3 style like:
table td:nth-child(2)
{
background-color:#909090;
}
Hope this will help.
If you didn't build your layout with <table> but with <div> tags, you can achieve it like this:
<div class="container">
<div>
First column
</div>
<div style="background-color: red">
Second column
</div>
...
</div>
Or, in CSS:
.container div:nth-child(2) {
background-color: red;
}
<table>
<colgroup>
<col span="2" style="background-color:red">
<col style="background-color:yellow">
</colgroup>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
<tr>
<td>5869207</td>
<td>My first CSS</td>
<td>$49</td>
</tr>
</table>
I have an html table that autosizes. The table has an extra row at the bottom with its elements containing the contentEditable="true" attribute.
When none of the cells in the row of contentEditable="true" cells have any value, the row has almost no height. Conversely, if any cell in the row of contentEditable="true" cells has any value, then all of the cells in that row display with the height of the rows above it.
Here's the fiddle that shows my issue. http://jsfiddle.net/bjsfiddle/4mVgg/
The first table below has a "." character in the first cell that has the contentEditable="true" set. This row displays properly:
<h4>Table where last line can be edited</h4>
<h5>(the contenteditable row has a "." in the name field</h5>
<table border="1">
<tr>
<th>Name</th>
<th>Address</th>
<th>Telephone</th>
</tr>
<tr>
<td>Billy Byte</td>
<td>999 MyStreet</td>
<td>555 777 8558</td>
</tr>
<tfoot>
<td contenteditable="true"><div>.</div></td>
<td contenteditable="true"><div></div></td>
<td contenteditable="true"><div></div></td>
</tfoot>
</table>
The second table below does not have the "." character in any contentEditable field, and the height
of that table row is extremely small. See below:
<h4>Same Table, no "." in the Name field</h4>
<table border="1">
<tr>
<th>Name</th>
<th>Address</th>
<th>Telephone</th>
</tr>
<tr>
<td>Billy Byte</td>
<td>999 MyStreet</td>
<td>555 777 8558</td>
</tr>
<tfoot>
<td contenteditable="true"><div></div></td>
<td contenteditable="true"><div></div></td>
<td contenteditable="true"><div></div></td>
</tfoot>
</table>
I'm sure it's probably something simple, but I just can't seem to find the answer.
Thanks much for any help
you can do a min-height, that way if it's empty, it will at least show the min height.
Use 20px or however many pixels you want!
so if you have CSS file, you can just throw this in there
td {
min-height: 20px;
}
if no CSS file, just add style tags in between the head tags in your html like this
<style type="text/css">
td { min-height: 20px; }
</style>
I've two tables like below:
<table width="100px">
<tr>
<td>
<table width="100%">
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>Five</td>
<td>Six</td>
<td>Seven</td>
<td>Eight</td>
<td>Nine</td>
<td>Ten</td>
</tr>
</table>
</td>
</tr>
</table>
When I run this my internal table is exceeding parent table width (100px) because it is having more TDs. How can restrict this?
All values are coming in the same row and it is going out of reserved area (100px). Is there any way to display values in multiple rows with the above code?
You cannot do this with <table> layout. Even adding the following CSS will not fix it, instead the cells are just rendered over each other.
table {
table-layout:fixed;
overflow:hidden;
}
The HTML table column element <col> element will also not really help since it will only apply to the first <td>.
One approach would be to use a non-<table> layout instead, for example:
HTML
<table>
<tr>
<td>
<div id="container">
<div>One</div><div>Two</div><div>Three</div><div>Four</div><div>Five</div>
<div>Six</div><div>Seven</div><div>Eight</div><div>Nine</div><div>Ten</div>
</div>
</td>
</tr>
</table>
CSS
table {
width:100px;
}
#container div {
display:inline-block;
}
See demo of how <col> does not work and how the <div> layout wraps at 100px.
U can't fit 10 words like this in 100px with normal size font.
I think you might want to use <tr></tr>(row) tags for each word instead of td(cell)
Or you really want the 100px row to be split in 10 cells and to contain those words? (I think if might be somehow possible but u won't see the words :D or maybe if you used little font and somehow made the words to be rotated about 90 degrees...)
This Q/A Word-wrap in an HTML table might help u in that case.
add a class to table and set this css code
table.restrict { table-layout:fixed; }
table.restrict td { overflow: hidden; }
It will help you:
Fixed Table Cell Width
Use style attr 'table-layout:fixed' with table
or try this:
// div css
<style>
.frame {
overflow-x:scroll;
width:100px;
}
</style>
<div class='frame'>
<table width='100px'>
<tr>
<td>
<table width='100%'>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>Five</td>
<td>Six</td>
<td>Seven</td>
<td>Eight</td>
<td>Nine</td>
<td>Ten</td>
</tr>
</table>
</td>
</tr>
</table>
</div>