I am facing issues with designing this table below as per image:
I tried below table basic html table tr > td structure but nothing is helping me to get desired output.
Use the rowspan attribute like so:
#table1 {
width: 100%;
border-collapse: collapse;
}
#table1 td {
border: 1px solid black;
}
<table id="table1">
<tr>
<td>Estimated Time</td>
<td>1</td>
</tr>
<tr>
<td rowspan="2">Delivery Charge</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>Payment Method</td>
<td>4</td>
</tr>
</table>
Related
I want to make an HTML table with divided into more then one columns just like ms word. Can any one please guide me how I can achieve my goal?
Here is code for what you want, as shown in image or in ms word.
Use "rowspan" & "colspan" for merging of cell
table {
border: 1px solid #ddd;
border-collapse: collapse
}
thead {
background: #f2f2f2;
}
table th,
table td {
border: 1px solid #ddd;
padding: 5px;
text-align: center;
}
<table>
<thead>
<tr>
<th rowspan="2">CH</th>
<th rowspan="2">Max Marks</th>
<th colspan="3">Marks Obtained</th>
<th rowspan="2">Grade</th>
<th rowspan="2">GP</th>
</tr>
<tr>
<th>TH.</th>
<th>PR.</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
</tbody>
</table>
I have a table with different number of <td>, something like this:
<table>
<tbody><tr><td>1</td><td>2</td><td>3</td><td>4</td>
</tr></tbody>
<tbody><tr><td>1</td>
</tr></tbody>
<tbody><tr><td>1</td><td>2</td>
</tr></tbody>
<tbody><tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td>
</tr></tbody>
</table>
I want to draw a line under every row, I tried these styles:
table{border-collapse: collapse;empty-cells: show;}
tbody{border-bottom:1px solid #000;}
tr{border-bottom:1px solid #000;}
td{border-bottom:1px solid #000;}
This is what I get:
Lines are not reaching the end of the table, this is the expected result:
Is this possible using css only?
table{border-collapse: collapse;empty-cells: show;}
tbody{border-bottom:1px solid #000;}
tr{border-bottom:1px solid #000;}
td{border-bottom:1px solid #000;}
<table>
<tbody><tr><td>1</td><td>2</td><td>3</td><td>4</td>
</tr></tbody>
<tbody><tr><td>1</td>
</tr></tbody>
<tbody><tr><td>1</td><td>2</td>
</tr></tbody>
<tbody><tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td>
</tr></tbody>
</table>
Use a pseudo element to create a long line and hide the overflow:
table {
border-collapse: collapse;
empty-cells: show;
overflow: hidden;
}
td {
position: relative;
padding: 5px;
}
td:first-child:before {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: -100vw;
;
height: 1px;
background: #000;
}
<table>
<tbody>
<tr>
<td>111</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>33</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</tbody>
</table>
Your new code:
table {
border-collapse: collapse;
empty-cells: show;
}
tr {
border-bottom: 1px solid #000;
display: block;
}
<table>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
<tbody>
<tr>
<td>1</td>
</tr>
</tbody>
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
</tbody>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</tbody>
</table>
Just changed the display CSS property of the rows to block.
This isn't the perfect solution for dynamic data so I would suggest making a table out of divisions and CSS.
I also suggest that you accept #Temani Afif answer since it is better than mine in the way that you can keep your table structure as well using the pseudo elements.
i want to add some style to my html table but can't make a certain selection in css, i want to select every even row except every last column of each one!
i already know how to select every even row usin: ":nth-child(even)" but i can't make it exclude the last column!
<tr>
<td>1</td>
<td>name</td>
<td>age</td>
<td>country</td>
<td id="rmv"><button>remove</button></td>
</tr>
You can target the tr elements that are even with tr:nth-child(even) followed by excluding the last td td:not(:last-child), the selector becomes tr:nth-child(even) td:not(:last-child)
tr:nth-child(even) td:not(:last-child) {
background-color: #f00;
}
/** only for demo purposes **/
table,
tr,
td {
border: 1px solid #000;
}
td {
padding: 8px;
}
<table>
<tr>
<td>1</td>
<td>name</td>
<td>age</td>
<td>country</td>
<td id="rmv"><button>remove</button></td>
</tr>
<tr>
<td>1</td>
<td>name</td>
<td>age</td>
<td>country</td>
<td id="rmv"><button>remove</button></td>
</tr>
<tr>
<td>1</td>
<td>name</td>
<td>age</td>
<td>country</td>
<td id="rmv"><button>remove</button></td>
</tr>
<tr>
<td>1</td>
<td>name</td>
<td>age</td>
<td>country</td>
<td id="rmv"><button>remove</button></td>
</tr>
</table>
I would like to create a simple html table with sub-rows within a single row. It looks something like this;
The tricky part is to divide the 3rd column into 2 rows row 1 and Row 2. How would the html code look like to implement such a table?
Using rowspan
<table border=1>
<tr><td rowspan=2>1</td><td rowspan=2>Main</td><td>Row 1</td></tr>
<tr><td>Row 2</td></tr>
</table>
Try this:
<html>
<head>
<style>
table {
border-collapse: collapse;
}
table, td, th {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th rowspan="3">col1</th>
<th rowspan="3">col2</th>
<th>col3</th>
<th>col4</th>
<th>col5</th>
</tr>
<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
</tr>
<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
</tr>
</table>
</body>
</html>
You can use two div's to simulate the two rows in the last column:
table {
border-collapse: collapse;
width: 50%;
height: 50%;
}
th, td {
border: 1px solid black;
}
td .test {
border-bottom: 1px solid black;
}
<table>
<tr id="row1">
<td>a
</td>
<td>b
</td>
<td>
<div class="test">Test</div>
<div>Test</div>
</td>
</tr>
</table>
Even nested tables might help:
<table>
<tr>
<td>Hi</td>
<td>
<table>
<tr>
<td>
How
</td>
</tr>
<tr>
<td>
When
</td>
</tr>
</table>
</td>
</tr>
</table>
Nested Tables Fiddle
I have 6 columns & I want to use colspan for 3&4 and 5&6 column.
And I don't want to show 1st & 2nd column for that particular row.
How to hide 1&2 column in that row?
Desired output..
Remove the border from the cells you wish to "hide". They are still there, but visually absent.
Have a fiddle!
Experimental fiddle for a table { border: xxx; } fix.
In this example I am targeting the cell with tbody tr:first-child td:first-child. This could obviously also be targeted with a class.
HTML
<table>
<tbody>
<tr>
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
CSS
table {
border-collapse: collapse;
width: 500px;
}
td {
border: solid 1px #000;
padding: 10px;
}
tbody tr:first-child td:first-child {
border: none;
}
Use display:none; in your CSS File on the 1st & 2nd Column.
You can select them with:
td:nth-of-type(1),
td:nth-of-type(2) {
display:none;
}
Use visibility:hidden on the first two columns of the row.
Try to use visibility: hidden; empty-cells: hide; for that cells.
Here is a fiddle
HTML
<table border="1">
<thead>
<tr>
<td colspan="2" style="border: 0;">a1</td>
<td colspan="2">a3</td>
<td colspan="2">a5</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>5555</td>
</tr>
</tbody>
</table>
CSS
table {
border: none;
border-collapse: collapse;
}