I want to align the first row of a table with a line of text. For example, I want to achieve
** some text ** |first row of table |
|second row of table|
...
When I use the <table> element it always puts the table on a new line, giving me
** some text **
|first row of table |
|second row of table|
...
which I do not want.
I only know basic HTML, but not CSS. Still, any solution involving CSS is fine, I just want a quickfix.
or you can also use rowspan inside table
<table border="1">
<tr>
<td rowspan="2" valign="top">some text</td>
<td>first row of table</td>
</tr>
<tr>
<td>second row of table</td>
</tr>
</table>
You could wrap the text in a span then do, e.g.:
span, table {
float:left;
}
<span>some text</span>
<table>
<tr>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
</tr>
</table>
You can use display: inline-table to make table an inline element and align the table with the row.
e.g.
table {
display: inline-table;
}
Related
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.
<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.
I have html tables inside a huge table that I'm trying to get to to lay their cells horizontally dynamically generated by php. Right now my structure looks like this:
<table>
<tr>
<td>
<table>
<tr>
<td>
1
</td>
</tr>
</table>
<table>
<tr>
<td>
2
</td>
</tr>
</table>
</td>
</tr>
</table>
and the html my chrome browser is rendering outputs the cells like this:
1
2
instead of:
1 2
I know I can just as easily do this:
<table>
<tr>
<td>
1
</td>
</tr>
<tr>
<td>
2
</td>
</tr>
</table>
and have my desired output of:
1 2
but I have some info that won't fit clean in a td cell in a table. Any help?
If you use "float: left" and put some text after the table, it positions next to the table, not in the bottom.
Use
td table {
float: left;
/*or:
display: inline-block;*/
}
Use float:left for table CSS
table{
float:left;
}
Fiddle here
Quick-Question: how can this be achieved? (see image below)
Setting td width booth in plain html and with css had no effect.
The td width CAN vary but only with the same width for each row.
Use three separate <table> blocks, each with a single row having three columns of varying widths.
I don't believe it can in one table easily.
Instead, you have to use the colspan attribute to overlap cells on different rows.
For example, use 6 columns, the first row will have colspan = 2 , td, colspan = 2
The second row will have td, td colspan=2, td and so on.
It's quite messy - you might want to consider displaying your data in a different way, for example, using DIVs
It's a lot to look at, but you need a parent table with three rows where each row contains another table with three columns:
<table>
<tr>
<td>
<table>
<tr>
<!-- Set Width of Individual Cells Here -->
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<!-- Set Width of Individual Cells Here -->
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<!-- Set Width of Individual Cells Here -->
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
</td>
</tr>
</table>
Here's a working jsFiddle to illustrate.
take 1 main table with 3 tr and in each tr take another sub table with 3 column than apply css
It's actually possible without this sub-tabling. I'm having this as a bug in my layout now. Just try playing around with paddings and margins inside cells :(
"Bug" works consistently across multiple browsers.
Edit:
Hunted that one.
td { display: block; }
Don't do it at home.
Every time I create a HTML table, it starts on a new paragraph. Is it possible to override this behaviour, so that I have two tables on the same row?
I'm using also CSS.
You'll want to style them, display: inline; or float both the tables.
I've always found it easier to just create a table that contains the 2 tables if i want them to always be on same row.
<table>
<tr>
<td>
<table id="table1">
<tr>
<td></td>
</tr>
</table>
</td>
<td>
<table id="table2">
<tr>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
styling works too though.
set display: inline-block; for each table.
online demo: http://jsfiddle.net/bitsmix/s7Bec/
jsfiddle
If you need the horizontally aligned tables to fill 100% width, you need:
display:inline-table; and float:left;