How do I fill with only one tr in multiple th table? - html

I finding a way to fill all the space with one td in tbody
<table>
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<tr>
</thead>
<tbody>
<tr>
<td>hi</td>
</tr>
</tbody>
</table>
the above example shows that one image takes all the space off tbody
Is there a way to solve this with css?


Just use the property colspan in That td:
th, td {
border: 1px solid;
}
<table>
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<tr>
</thead>
<tbody>
<tr>
<td colspan="3">hi</td>
</tr>
</tbody>
</table>

Related

why pseudo class selector select all first children of it's child?

So I want to get a table just like the picture down below:
I used first-child and last-child selectors but they seem like they select all the first and last elements IDK why, here's what I got:
here's what I've tried:
<style>
table {
border: 1px solid #c4dcf3;
border-collapse: collapse;
}
table :first-child, table :last-child {
background-color: green;
}
table tbody:nth-child(odd) {
background-color: red;
}
</style>
<table>
<thead>
<tr>
<th>Country</th>
<th>OrderID</th>
<th>Order Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>USA</td>
<td>1000</td>
<td>$1,300</td>
</tr>
<tr>
<td>USA</td>
<td>1001</td>
<td>$700</td>
</tr>
<tr>
<td>CA</td>
<td>1002</td>
<td>$2,000</td>
</tr>
<tr>
<td>CA</td>
<td>1003</td>
<td>$1,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td></td>
<td>$5,000</td>
</tr>
</tfoot>
</table>

:first-child and :last-child have to be placed on the child-elements. Since you threw it on tables, it looked for the first and last table in a set of table, which probably don't exist.
You can also target thead and tfoot for your desired styling, which might be more appropriate.
Same principle applies to the alternating highlighting. table > tbody > tr:nth-child(odd)
I added a working snippet.
<style>
table {
border: 1px solid #c4dcf3;
border-collapse: collapse;
}
thead,
tfoot {
background-color: green;
}
table > tbody > tr:nth-child(odd) {
background-color: red;
}
</style>
<table>
<thead>
<tr>
<th>Country</th>
<th>OrderID</th>
<th>Order Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>USA</td>
<td>1000</td>
<td>$1,300</td>
</tr>
<tr>
<td>USA</td>
<td>1001</td>
<td>$700</td>
</tr>
<tr>
<td>CA</td>
<td>1002</td>
<td>$2,000</td>
</tr>
<tr>
<td>CA</td>
<td>1003</td>
<td>$1,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td></td>
<td>$5,000</td>
</tr>
</tfoot>
</table>

Don't target 1st / last child when you can simply target thead and tfoot
Also your code doesn't work because it should be:
table>*:first-child ,
table>*:last-child {
background-color: green;
}
without space

You need to apply color on tr and make changes according to parent as you are using thead, tbody, tfoot. Your css not apply properly because you are using table tag there. table has 3 child thead, tbody, tfoot and each have their separate tr tags as first child and last child.
<style>
table {
border: 1px solid #c4dcf3;
border-collapse: collapse;
}
thead tr, tfoot tr{
background-color: green;
}
tbody tr:nth-child(odd) {
background-color: red;
}
</style>
<table>
<thead>
<tr>
<th>Country</th>
<th>OrderID</th>
<th>Order Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>USA</td>
<td>1000</td>
<td>$1,300</td>
</tr>
<tr>
<td>USA</td>
<td>1001</td>
<td>$700</td>
</tr>
<tr>
<td>CA</td>
<td>1002</td>
<td>$2,000</td>
</tr>
<tr>
<td>CA</td>
<td>1003</td>
<td>$1,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td></td>
<td>$5,000</td>
</tr>
</tfoot>
</table>

table {
border: 1px solid #c4dcf3;
border-collapse: collapse;
}
thead,
tfoot {
background-color: #4e81e7;
}
tr:nth-child(even) {background-color: #f2f2f2;}
<table>
<thead>
<tr>
<th>Country</th>
<th>OrderID</th>
<th>Order Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>USA</td>
<td>1000</td>
<td>$1,300</td>
</tr>
<tr>
<td>USA</td>
<td>1001</td>
<td>$700</td>
</tr>
<tr>
<td>CA</td>
<td>1002</td>
<td>$2,000</td>
</tr>
<tr>
<td>CA</td>
<td>1003</td>
<td>$1,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td></td>
<td>$5,000</td>
</tr>
</tfoot>
</table>

Is this table possible in HTML

I am wondering if this table layout in HTML possible? here is what I have in Reactjs:
I am getting errors trying to do a colspan.
What I want to achieve is this layout:
Many thanks in advance and greatly appreciate any helps

yes it is possible with colspan, here is the example code
<table>
<tr>
<th>name</th>
<th>title</th>
<th>edit</th>
</tr>
<tr>
<td>Jhon doe</td>
<td>Sales</td>
<td>Edit</td>
</tr>
<tr>
<td colspan="3">Remark : blablabla</td>
</tr>
<tr>
<td>Jane doe</td>
<td>Sales</td>
<td>Edit</td>
</tr>
<tr>
<td colspan="3">Remark : blablabla</td>
</tr>
</table>
but you will need css to add borders
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}

That's how you wanted your table to be, use colspan after which cell you need divided columns.
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
table {
border: 1px solid black;
width: 60%;
text-align: left;
}
th,
td {
padding: 10px;
}
<table>
<thead>
<tr>
<th>Name</th>
<th>Name</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td colspan="3">Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td colspan="3">Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td colspan="3">Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
</tbody>
</table>

Yes, it is.
You can read this link.
But to save your time you just need to set colspan=3 in your td where you want it to be expanded.

Group table rowgroups HTML

Lets say we got a table like this:
<table>
<tbody>
<tr>
<th>1</th>
<th>A</th>
</tr>
</tbody>
<tbody>
<tr>
<th>2</th>
<th>B</th>
</tr>
</tbody>
</table>
What would be the best way to make a wrapper around the <tbody> elements?
I would need to make a table with a fixed header/footer and a scrollable content. I'm already using the <tbody> tags to connect specific rows and i could not find a proper way to wrap my whole table content.
Thank you in advance!

You need to come up with a proper structure like below. tbody IS the wrapper you need.
<table>
<thead>
<tr>
<th>1</th>
<th>A</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td>B</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Footer!</td>
</tr>
</tfoot>
</table>

If you need x2 tbody elements consider using x2 table elements instead - which you can nest within td elements, as the code snippet demonstrates below:
<table>
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<th>1</th>
<th>A</th>
</tr>
</tbody>
</table>
</td>
<td>
<table>
<tbody>
<tr>
<th>2</th>
<th>B</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

You can use multiple <tbody> elements in a table. It's valid.
tbody:nth-child(3) {
background:yellow;
}
<table>
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
</tr>
</thead>
<tbody>
<tr><td>Cell</td><td>Cell</td><td>Cell</td></tr>
<tr><td>Cell</td><td>Cell</td><td>Cell</td></tr>
</tbody>
<tbody>
<tr><td>Cell</td><td>Cell</td><td>Cell</td></tr>
<tr><td>Cell</td><td>Cell</td><td>Cell</td></tr>
</tbody>
<tbody>
<tr><td>Cell</td><td>Cell</td><td>Cell</td></tr>
<tr><td>Cell</td><td>Cell</td><td>Cell</td></tr>
</tbody>
</table>
You can see the same example in w3 website.

occasional table width expansion [duplicate]

I have a table which has a column for URLs and sometimes the URL can get pretty long.
I set the table to have a specific width but there are times when the URL wouldn't even break itself and expand the table which messes up with the layout.
Here's a Fiddle for you to take a look at and I'll provide the codes below:
HTML
<table border="1">
<thead>
<tr>
<th>Name</th>
<th>URL</th>
</tr>
</thead>
<tbody>
<tr>
<td>Test</td>
<td>http://www.exampledomain.org/How-We-Work/General-Information/General-Opportunities/Open-Concept-Memo-Global-Test-Cases</td>
</tr>
</tbody>
</table>
<table border="1">
<thead>
<tr>
<th>Name</th>
<th>URL</th>
</tr>
</thead>
<tbody>
<tr>
<td>Another Test</td>
<td>http://www.exampledomain.org/search?q=flagship+collaborative+research+program&btnG=Google%2BSearch&client=csiro_frontend&output=xml_no_dtd&proxystylesheet=csiro_frontend&proxyreload=0&sort=date%253AD%253AL%253Ad1&wc=200&wc_mc=1&oe=UTF-8&ie=UTF-8&ud=1&exclude_apps=1&site=Main&filter=0&getfields=*&sourcepage={CB41B120-BEE8-4511-9BED-A5E43D32381D}</td>
</tr>
</tbody>
</table>
CSS
table {
width: 500px;
margin: 5px;
}

https://jsfiddle.net/0xyhz7p0/1/
td {
word-break: break-word;
}

You can use table-layout: fixed and word-wrap: break-word;
table {
table-layout: fixed;
width: 500px;
margin: 5px;
}
td {
word-wrap: break-word;
}
<table border="1">
<thead>
<tr>
<th>Name</th>
<th>URL</th>
</tr>
</thead>
<tbody>
<tr>
<td>Test</td>
<td>http://www.exampledomain.org/How-We-Work/General-Information/General-Opportunities/Open-Concept-Memo-Global-Test-Cases</td>
</tr>
</tbody>
</table>
<table border="1">
<thead>
<tr>
<th>Name</th>
<th>URL</th>
</tr>
</thead>
<tbody>
<tr>
<td>Another Test</td>
<td>http://www.exampledomain.org/search?q=flagship+collaborative+research+program&btnG=Google%2BSearch&client=csiro_frontend&output=xml_no_dtd&proxystylesheet=csiro_frontend&proxyreload=0&sort=date%253AD%253AL%253Ad1&wc=200&wc_mc=1&oe=UTF-8&ie=UTF-8&ud=1&exclude_apps=1&site=Main&filter=0&getfields=*&sourcepage={CB41B120-BEE8-4511-9BED-A5E43D32381D}</td>
</tr>
</tbody>
</table>

Bootstrap table - split one of the row's column in two

I managed to create 'double row' for a table in Bootstrap:
<table class="table table-striped table-bordered">
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
<tr>
<td>A</td>
<td>A</td>
<td>A</td>
</tr>
<tr>
<td rowspan="2">B</td>
<td>B1</td>
<td>B1</td>
</tr>
<tr>
<td>B2</td>
<td>B2</td>
</tr>
</table>
Ideally I want it to look like this:
Playing around with colspan didn't really help, only broke things. I tried to set colspan of every row's first column to 2 and the one of B to 1, and have additional <td> for B1 and B2, didn't work.

Finally I've got a solution for you :
SNIPPET
.container {
background-color: #ccc;
}
thead{
background:#C9E4F4;
}
table,
th,
td {
text-align: center !important;
border: 1.5px solid #929292 !important;
}
#text1 {
background-color: #cac;
}
#text2 {
background-color: #cca;
}
#navigation {
background-color: #acc;
}
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered">
<tr>
<thead>
<th colspan="2">1</th>
<th>2</th>
<th>3</th>
</thead>
</tr>
<tr>
<td colspan="2">A</td>
<td>A</td>
<td>A</td>
</tr>
<tr>
<td rowspan="2">B</td>
<td>B1</td>
<td>B1</td>
<td>B1</td>
</tr>
<tr>
<td>B2</td>
<td>B2</td>
<td>B2</td>
</tr>
</table>