I have a table separated by thead and tbody. The text I have in tbody is vertically centered. I want to have it displayed at the top of the tbody.
<thead>
<tr>
<td>.... </td>
</tr>
</thead>
<tbody>
<tr>
<td colspan="5">
<h1>Hi</h1>
<p> Hello!
</p>
</td>
</tr>
</tbody>
I tried doing something like:
tbody { vertical-align:top;}
But that doesnt work
The problem is not with valign as it works correctly, the problem is the element h1 has a margin by default, you should set it to 0:
h1 {
margin: 0;
}
<table border="1">
<thead>
<tr>
<td>.... </td>
<td>.... </td>
</tr>
</thead>
<tbody valign="top">
<tr>
<td>
<h1>Hi</h1>
<p> Hello!</p>
</td>
<td>
A
</td>
</tr>
</tbody>
</table>
Related
Is it possible to create a bootstrap table, which will still be "table" and will have two rows in one row (please see enclosed image) while still keeping columns aligned with "thead".
I don't want to make it with div, maybe there is some easy way how to make it as table, but I don't see it. I would like to achieve also "striped class" styling, so that first row will be white, second gray etc.
I should be also able to hide extra row ("some other text"), if there are not data, while still keeping first row ("content, content").
I would suggest to take a look at how to mark up tables
https://developer.mozilla.org/de/docs/Web/HTML/Element/table
In your case rowspan might become handy
table {
border-collapse: collapse;
}
table,
tr,
th,
td {
border: 1px solid #000;
}
th {
padding: 1ex;
background: #ccc;
}
td {
padding: 1ex;
}
.divide td {
border-top: 3px solid;
}
<table>
<tr>
<th>head</th>
<th>title</th>
<th>title</th>
<th>title</th>
<th></th>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>content</td>
<td>content</td>
<td>content</td>
<td rowspan="2">white</td>
</tr>
<tr>
<td colspan="4">
lorem ipsum
</td>
</tr>
<tr class="divide">
<td>
<input type="checkbox">
</td>
<td>content</td>
<td>content</td>
<td>content</td>
<td rowspan="2">gray</td>
</tr>
<tr>
<td colspan="4">
lorem ipsum
</td>
</tr>
<tr class="divide">
<td>
<input type="checkbox">
</td>
<td>content</td>
<td>content</td>
<td>content</td>
<td>white</td>
</tr>
<tr class="divide">
<td>
<input type="checkbox">
</td>
<td>content</td>
<td>content</td>
<td>content</td>
<td rowspan="2">gray</td>
</tr>
<tr>
<td colspan="4">
lorem ipsum
</td>
</tr>
</table>
Two and a half years on, Bootstrap 5 (still in beta as of 7 January 2021) now looks to have a better solution in the ability to nest tables.
https://getbootstrap.com/docs/5.0/content/tables/#nesting
It looks like a subtle but important expansion on the answer provided by bitstarr, particularly because it will allow you to choose whether you want to inherit styling of the parent table or not.
Nesting is just achieved by making sure that you include a "colspan" value in a row, then add another table inside that row.
As a result, the first two rows or your intended outcome (the heading and the first row of content) would look something like this:
<table class="table table-striped">
<thead>
<tr>
<th>head</th>
<th>title</th>
<th>title</th>
<th>title</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox">
</td>
<td>content</td>
<td>content</td>
<td>content</td>
<td rowspan="2">white</td>
</tr>
<tr>
<td colspan="4">
<table class="table mb-0">
<tr>
<td>
Some other text that can be as long as a row
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
I would like to convert a column to a row, and display it with the other rows on 1 line. I don't know if it is possible, but if it is, please help! I want to convert table column into table row only using CSS. The table is good, it works fine, but i want to make it responsive, everything on a vertical line, i just get this as result, a Γ shape.
this is what i got:
#media screen and (max-width:650px)
{
table, thead, tbody, tr, th, td{
display:block;
}
thead tr {
display:none;
}
tbody tr{
display:table-row;
width:auto;
}
}
/This is what i goit in HTML/
<table width="1400px">
<thead>
<tr>
<th>a1</th>
<th>a2</th>
<th>a3</th>
<th>a4</th>
</tr>
</thead>
<tbody>
<tr>
<td>b1</td>
<td rowspan="13">b2</td>
<td rowspan="13">b3</td>
<td rowspan="13">b4</td>
</tr>
<tr>
<td>c1</td>
</tr>
<tr>
<td>d1</td>
</tr>
<tr>
<td>e1</td>
</tr>
<tr>
<td>f1</td>
</tr>
<tr>
<td>g1</td>
</tr>
<tr>
<td>h1</td>
</tr>
<tr>
<td>i1</td>
</tr>
<tr>
<td>j1</td>
</tr>
<tr>
<td>k1</td>
</tr>
<tr>
<td>l1</td>
</tr>
<tr>
<td>m1</td>
</tr>
<tr>
<td>n1</td>
</tr>
</tbody>
</table>
I need to target the first <td> element in a table row that is visible--meaning it does not have inline styling of display:none.
Here's the gotchyas:
They are not always hidden
Sometimes more than one is hidden.
I can't edit the HTML or use javascript/jQuery--This needs to be a pure CSS solution (hopefully)
Here is a quick sample of what the code looks like:
<table>
<thead>
<tr>
<th style="display:none">Header1</th>
<th>Header2</th>
<th>Header3</th>
<th>Header4</th>
</tr>
</thead>
<tbody>
<tr>
<td style="display:none">Body1</td>
<td>Body2</td>
<td>Body3</td>
<td>Body4</td>
</tr>
</tbody>
</table>
I tried messing with something like this to no avail:
table > tbody > tr > td:first-of-type:not([style*="display:none"])
Here's a fiddle to mess with
Thanks in advance.
If your hidden elements are always at the beginning of the row, you can use the direct sibling selector for this +.
td:first-child,
td[style*="none"] + td {
color: red;
}
<table>
<thead>
<tr>
<th style="display:none">Header1</th>
<th>Header2</th>
<th>Header3</th>
<th>Header4</th>
</tr>
</thead>
<tbody>
<tr>
<td style="display:none">Body1</td>
<td>Body2</td>
<td>Body3</td>
<td>Body4</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
</tr>
<tr>
<td style="display:none">and</td>
<td>here's</td>
<td>an</td>
<td style="display:none">edge</td>
<td>case</td>
</tr>
</tbody>
</table>
This will style anything that isn't "display:none", but undo that when it gets to a subsequent "display:none".
table > tbody > tr > td:not([style*="display:none"]) {
color: red;
}
table > tbody > tr > td:not([style*="display:none"]) ~ td:not([style*="display:none"]) {
color: inherit;
}
<table>
<thead>
<tr>
<th style="display:none">Header1</th>
<th>Header2</th>
<th>Header3</th>
<th>Header4</th>
</tr>
</thead>
<tbody>
<tr>
<td style="display:none">Body1</td>
<td>Body2</td>
<td>Body3</td>
<td>Body4</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
</tr>
</tbody>
</table>
Hello I have these following tables for which I want same vertical line. please check my code here link I have two vertical tables, I want same vertical line of alignment for both the tables so that The line between two tables appears same though the tables are different.
Here is what I want
Here is what I am getting if I add text to th .
please tell me how can I make it better.
table,
th,
td {
border: 1px solid black;
}
<table style="width:100%" cellpadding="10px" cellspacing="1px" padding="20px">
<tr>
<th>Month</th>
<td>Savings</td>
</tr>
<tr>
<th>January</th>
<td>$100</td>
</tr>
<tr>
<th>February</th>
<td>$80</td>
</tr>
</table>
<table style="width:100%">
<tr>
<th>Monthasnsandf</th>
<td>Savings</td>
</tr>
<tr>
<th>Januarydfsadfas</th>
<td>$100</td>
</tr>
<tr>
<th>Februarydfsadfsafa</th>
<td>$80</td>
</tr>
</table>
You could simply specify the width for the th and td elements, say 50%.
table, th, td {
border: 1px solid black;
}
table th, table td {
width: 50%;
}
table th {
text-align: left;
}
<table style="width:100%" cellpadding="10px" cellspacing="1px" padding="20px">
<tr>
<th>Month</th>
<td>Savings</td>
</tr>
<tr>
<th>January</th>
<td >$100</td>
</tr>
<tr>
<th>February</th>
<td >$80</td>
</tr>
</table>
<table style="width:100%" cellpadding="10px" cellspacing="1px" padding="20px">
<tr>
<th>Monthasnsandf</th>
<td>Savings</td>
</tr>
<tr>
<th>Januarydfsadfas</th>
<td >$100</td>
</tr>
<tr>
<th>Februarydfsadfsafa</th>
<td >$80</td>
</tr>
</table>
what I did is put the two tables in another table which has 2 rows to perfectly match vertical alignment
table, th, td {
border: 1px solid black;
}
table th, table td {
width: 50%;
}
<table>
<tr>
<td>
<table style="width:100%">
<tr>
<th>Month</th>
<td>Savings</td>
</tr>
<tr>
<th>January</th>
<td >$100</td>
</tr>
<tr>
<th>February</th>
<td >$80</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table style="width:100%">
<tr>
<th>Monthasnsandf</th>
<td>Savings</td>
</tr>
<tr>
<th>Januarydfsadfas</th>
<td >$100</td>
</tr>
<tr>
<th>Februarydfsadfsafa</th>
<td >$80</td>
</tr>
</table>
</td>
</tr>
</table>
I assume this is what you expect!
I'm trying to make a print stylesheet which hides (does not print) elements which do not have a child element with a set class.
I thought this might work but sadly it doesn't.
<style type="text/css" media="print">
table:not( > thead > tr > th > .Collapse) {
display:none;
}
</style>
I don't want to use any javascript if possible though.
Can this be done?
Here's the html for the element in question... the second table should be hidden when printed...
<table>
<thead>
<tr>
<th>
<span class="Collapse">Lorem ipsum...</span>
</th>
</tr>
</thead>
<tbody style="display: none; ">
<tr>
<td>Blah Blah...</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>
<span class="Expand">Lorem ipsum...</span>
</th>
</tr>
</thead>
<tbody style="display: none; ">
<tr>
<td>Blah Blah...</td>
</tr>
</tbody>
</table>
To target the span:
table > thead > tr > th > .Expand {
display:none;
}
Update
Targeting a css class and effecting it's parent is not currently possible. The easiest way to hide the table is to add a class to it, then you can target that class easily.
Example
<table>
<thead>
<tr>
<th>
<span class="Collapse">Lorem ipsum...</span>
</th>
</tr>
</thead>
<tbody style="display: none; ">
<tr>
<td>Blah Blah...</td>
</tr>
</tbody>
</table>
<table class="hide-for-print">
<thead>
<tr>
<th>
<span class="Expand">Lorem ipsum...</span>
</th>
</tr>
</thead>
<tbody style="display: none; ">
<tr>
<td>Blah Blah...</td>
</tr>
</tbody>
</table>
I would suggest instead, putting the classes on the tables, and then selecting the spans inside them.
<table class="Collapse">
<thead>
<tr>
<th>
<span>Lorem ipsum...</span>
</th>
</tr>
</thead>
<tbody style="display: none; ">
<tr>
<td>Blah Blah...</td>
</tr>
</tbody>
</table>
<table class="Expand">
<thead>
<tr>
<th>
<span>Lorem ipsum...</span>
</th>
</tr>
</thead>
<tbody style="display: none; ">
<tr>
<td>Blah Blah...</td>
</tr>
</tbody>
</table>
.Collapse {
display:none;
}
.Collapse thead tr th span {
}
.Expand thead tr th span {
}