i need to remove specific tr border in my table.
in bootstrap its come automaticly when i put "tr" element.
this is my table:
<div class="table-responsive">
<table class="table table-sm table-dark">
<thead>
</thead>
<tbody>
<tr>
<td>bbb</td>
<td>AAA</td>
<td>1</td>
<td>-</td>
<td>1</td>
<td>AAA</td>
<td>bbb</td>
</tr>
</tbody>
<tr>
<td></td>
<td></td>
<td>18:00</td>
<td></td>
<td>19/10/2018</td>
<td></td>
<td></td>
</tr>
<tbody>
<tr></tr>
</tbody>
</table>
i want the middle border of "tr" element not show. i cant success do taht
Try to inspect the regarding css items via F12 or just right click on item and choose "inspect element". Menue naming depends on your browser.
Related
I need to design a HTML table as the attachment below but I seem to be struggling due to my lack of understanding in HTML table.
This is what I've come up with so far but as you can see, it's not even close to the end result. I hope that someone can point me in the right direction.
<section class="mb-5">
<div class="container">
<div class="row">
<div class="col-12">
<!-- Heading -->
<h2 class="mb-3">
Task activities reports
</h2>
<div class="table-responsive border">
<table class="table mb-0">
<thead>
<tr>
<th scope="col">Service</th>
<th scope="col">Category</th>
<th scope="col">
<table>
<thead>
<tr>
<th colspan="10">Percent completed</th>
</tr>
<tr>
<th>10%</th>
<th>20%</th>
<th>30%</th>
<th>40%</th>
<th>50%</th>
<th>60%</th>
<th>70%</th>
<th>80%</th>
<th>90%</th>
<th>100%</th>
</tr>
</thead>
</table>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Clipping path</td>
<td>Category 1</td>
<td>
<table>
<tbody>
<tr>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>2</td>
<td>3</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>1</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</section>
You need to use the colspan and rowspan attributes, not nested tables. colspan tells a cell to span the width of two columns, and rowspan tells it to span the height of two rows.
I've rendered your header rows and the first three rows of content based on what I said here. The rest of the table content follows the same principles.
table {
border-collapse: collapse;
}
td,
th {
border: 1px solid black;
}
<table>
<thead>
<tr>
<th rowspan="2">Service</th>
<th rowspan="2">Category</th>
<th colspan="11">Percent completed</th>
</tr>
<tr>
<th>10%</th>
<th>20%</th>
<th>30%</th>
<th>40%</th>
<th>50%</th>
<th>60%</th>
<th>70%</th>
<th>80%</th>
<th>90%</th>
<th>100%</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="6">Clipping Path</td>
<td>Category 1</td>
<td></td>
<td>3</td>
<td></td>
<td></td>
<td>2</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>1000</td>
<td>1005</td>
</tr>
<tr>
<td>Category 2</td>
<td>2</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>3</td>
<td></td>
<td></td>
<td></td>
<td>1100</td>
<td>1105</td>
</tr>
<tr>
<td>Category 3</td>
<td></td>
<td></td>
<td></td>
<td>5</td>
<td></td>
<td></td>
<td>4</td>
<td></td>
<td></td>
<td>1200</td>
<td>1209</td>
</tr>
</tbody>
</table>
I've added CSS for borders so you can see the edges of the cells.
It's a little hard to get used to at first, because you have to ignore the presence of the cells in the rows where they "grow" to from where they were declared. Thus I've applied rowspan="2" to the Service heading, and that cell "grows" into the next row, along with Category. So that 10% heading shows up below Percent (since it only spans 1 row) because Service and Category are taking up space in the row though never declared in the <tr>.
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.
Is that possible not to indent cells in th?
http://jsfiddle.net/kWTte/1/
HTML
<table>
<th>
<td></td>
<td></td>
</th>
<tr>
<td></td>
<td></td>
</tr>
</table>
You can think of th as the equivalent of td, but for table's header.
So ths should be contained into a tr element.
The correct form is:
<table>
<tr>
<th>Header one</th>
<th>Header two</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
If you need to wrap the table header you could use thead.
Similarly you could use tbody for the body of the table (note that you can have more than one tbody in the same table).
I have a basic HTML table like so:
<table>
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
I want to add a toolbar above it. Would it be semantically acceptable to add a toolbar as a row in the thead?
<table>
<thead>
<tr>
<th colspan="2">
<!-- toolbar buttons -->
</th>
</tr>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
IMHO, since the toolbar is related to the tabular data, I see no semantic issue with having that toolbar live in a row in the thead.
How can I make a table which has sub/nested tables scrollable if given a max height? I do not want the thead to scroll with it. What I'm really looking for is some valid tag that I can wrap my s in, or some other markup that will work just as well as the this:
<table>
<thead>
<tr>
<th>Column1</th>
<th>Column2</th>
</tr>
</thead>
<!-- Insert valid tag here to wrap <tbody>s -->
<tbody>
<tr>
<td>Val1</td>
<td>Val2</td>
</tr>
<tr class="sub-table">
<td colspan="2">
<table>
<thead>
<tr>
<th>Sub Column1</th>
<th>Sub Column2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sub Val1</td>
<td>Sub Val2</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Val1</td>
<td>Val2</td>
</tr>
<tr class="sub-table">
<td colspan="2">
<table>
<thead>
<tr>
<th>Sub Column1</th>
<th>Sub Column2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sub Val1</td>
<td>Sub Val2</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
<!-- Insert valid close tag here -->
</table>
If I understand your question correctly, maybe try something like this: http://jsfiddle.net/pPuXL/1/
You need to display the TBODY elements as "block" or "inline-block" in order for overflow to work on it, as in the CSS example I posted.