I have a table with 2 columns and I want each row to have a gray border-top, a border down the middle separating the columns and the overall table to have a black border. However, the border on the table rows and the border-right on the first column of each row is overlapping the overall tables border. How can I resolve this?
table {
width:350px;
border-collapse:collapse;
table-layout:fixed;
border:2px solid black;
text-align:center;
}
tr {
border-top:2px solid #cecece;
}
thead tr {
border-top:none;
}
th:first-child, td:first-child {
border-right:2px solid #cecece;
}
<table>
<thead>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Col 1 Row 1</td>
<td>Col 2 Row 1</td>
</tr>
<tr>
<td>Col 1 Row 2</td>
<td>Col 2 Row 2</td>
</tr>
<tr>
<td>Col 1 Row 3</td>
<td>Col 2 Row 3</td>
</tr>
</tbody>
</table>
Wrap the table element in a div and add border to the div element instead of the table element.
.wrapper {
width: 350px;
border: 2px solid black;
}
table {
border-collapse: collapse;
table-layout: fixed;
text-align: center;
width: 100%;
}
tr {
border-top: 2px solid #cecece;
}
thead tr {
border-top: none;
}
th:first-child,
td:first-child {
border-right: 2px solid #cecece;
}
<div class="wrapper">
<table>
<thead>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Col 1 Row 1</td>
<td>Col 2 Row 1</td>
</tr>
<tr>
<td>Col 1 Row 2</td>
<td>Col 2 Row 2</td>
</tr>
<tr>
<td>Col 1 Row 3</td>
<td>Col 2 Row 3</td>
</tr>
</tbody>
</table>
</div>
Related
I have a need to have a table with 3px padding (plus border) and background (only) on the th.
Here is what I am using:
<table class="data" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th scope="col">Example Here</th>
<th scope="col">Another Here</th>
<th scope="col">One Here</th>
<th scope="col">Two Here</th>
<th scope="col">Three Here</th>
</tr>
</thead>
<tbody>
<tr>
<td>This is some text.</td>
<td>Data table with data.</td>
<td>Data here.</td>
<td>And more here.</td>
<td>This is legit!</td>
</tr>
<tr>
<td>This is some text.</td>
<td>Data table with data.</td>
<td>Data here.</td>
<td>And more here.</td>
<td>This is legit!</td>
</tr>
<tr>
<td>This is some text.</td>
<td>Data table with data.</td>
<td>Data here.</td>
<td>And more here.</td>
<td>This is legit!</td>
</tr>
<tr>
<td>This is some text.</td>
<td>Data table with data.</td>
<td>Data here.</td>
<td>And more here.</td>
<td>This is legit!</td>
</tr>
</tbody>
</table>
<style type="text/css">
/* Data Table */
table.data {width:100%;border:1px solid #dfdfdf;color:#303030;border-radius:4px;padding:4px;line-height:25px;}
table.data thead tr {background:#eee;width:100%;}
table.data tbody tr:nth-child(even) {background:#efefef;}
table.data thead tr th:first-of-type {border-top-left-radius:4px;}
table.data thead tr th:last-of-type {border-top-right-radius:4px;}
table.data td, table.data th{padding:3px 8px 4px;}
</style>
I have created a table with border which appears to create a rounded corner with border but the background doesn't change. So obviously using the same background as border results in no change. I've also played with background:radial-gradient with no solution, yet.
Thank you
I believe this how you are expecting the border to be. The only thing I have done is to removed the border:1px solid #dfdfdf from table.data class and added in the table.data td, table.data th class. Below is the complete changes:
table.data {
width: 100%;
color: #303030;
border-radius: 4px;
padding: 4px;
line-height: 25px;
}
table.data thead tr {
background: #eee;
width: 100%;
}
table.data tbody tr:nth-child(even) {
background: #efefef;
}
table.data thead tr th:first-of-type {
border-top-left-radius: 4px;
}
table.data thead tr th:last-of-type {
border-top-right-radius: 4px;
}
table.data td,
table.data th {
padding: 3px 8px 4px;
border: 1px solid #dfdfdf;
}
<table class="data" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th scope="col">Example Here</th>
<th scope="col">Another Here</th>
<th scope="col">One Here</th>
<th scope="col">Two Here</th>
<th scope="col">Three Here</th>
</tr>
</thead>
<tbody>
<tr>
<td>This is some text.</td>
<td>Data table with data.</td>
<td>Data here.</td>
<td>And more here.</td>
<td>This is legit!</td>
</tr>
<tr>
<td>This is some text.</td>
<td>Data table with data.</td>
<td>Data here.</td>
<td>And more here.</td>
<td>This is legit!</td>
</tr>
<tr>
<td>This is some text.</td>
<td>Data table with data.</td>
<td>Data here.</td>
<td>And more here.</td>
<td>This is legit!</td>
</tr>
<tr>
<td>This is some text.</td>
<td>Data table with data.</td>
<td>Data here.</td>
<td>And more here.</td>
<td>This is legit!</td>
</tr>
</tbody>
</table>
Update: Attaching the screenshot taken in the Firefox browser(109.0.1) in Mac OS(64-bit).
Why in the following example do the columns of the header of the table not take the widths defined in the CSS?
I think in Table 1, the browser can not calculate a percentage value and a fixed one.
/************* commun css***********************/
table {
border-collapse: collapse;
table-layout:fixed;
width: 100%;
position: relative;
}
td, th {
border: 1px solid black;
-webkit-box-sizing: border-box;
}
tr{
width: 100%;
position: relative;
}
/************* css table 1***********************/
.table1 .col1 {
width: calc(35% - 10px);
}
.table1 .col2 {
width: calc(40% - 10px);
}
.table1 .col3 {
width: calc(25% - 10px);
}
.table1 .col4 {
width: 30px;
}
/************* css table 2***********************/
.table2 .col1 {
width: calc(30%);
}
.table2 .col2 {
width: calc(20%);
}
.table2 .col3 {
width: calc(50%);
}
<p>
Table 1 : invalid render (Chrome browser)
</p>
<table class="table1">
<thead>
<tr>
<th class="col1">Col 1</th>
<th class="col2">Col 2</th>
<th class="col3">Col 3</th>
<th class="col4">Col 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1</td>
<td>Row 1</td>
<td>Row 1</td>
<td>Row 1</td>
</tr>
<tr>
<td>Row 2</td>
<td>Row 2</td>
<td>Row 2</td>
<td>Row 2</td>
</tr>
</tbody>
</table>
<p>
Table 2 : valid render (Chrome browser)
</p>
<table class="table2">
<thead>
<tr>
<th class="col1">Col 1</th>
<th class="col2">Col 2</th>
<th class="col3">Col 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1</td>
<td>Row 1</td>
<td>Row 1</td>
</tr>
<tr>
<td>Row 2</td>
<td>Row 2</td>
<td>Row 2</td>
</tr>
</tbody>
</table>
Does anyone have any advice in this situation?
Thank you in advance
Example : https://jsfiddle.net/3wq65hb4/
Yes, there is a problem with calc() width for tables. But it works for divs. What about making it on divs instead of tables?
Let's look at example for your purposes:
https://jsfiddle.net/3wq65hb4/39/
You can find there:
.row {
display: flex;
}
It's for equal height for columns. Also you can find there:
margin-left: -1px;
It's solution for borders - to avoid double borders like:
Also remember that max-width for your column: 30px means that it always will be 30px even if your content will be wider:
But maybe it's what you want to achieve.
Let me know if that solution is ok for you. And good luck with other htmls :)
This question already has answers here:
Alternate table row color using CSS?
(11 answers)
Closed 6 years ago.
I have a table with class table. The only styling so far is the table th. I'd like to use a CSS value to alternate between white and silver for the rows, and hover silver for the entire row. Does anyone have the code for that?
<table class='table'>
<tr>
<th>heading</th>
<th>heading 2</th>
<th>heading 3</th>
</tr>
<tr class='table'>
<td>col 1</td>
<td>col 2</td>
<td>col 3</td>
</tr>
<tr class='table'>
<td>col 1</td>
<td>col 2</td>
<td>col 3</td>
</tr>
<tr class='table'>
<td>col 1</td>
<td>col 2</td>
<td>col 3</td>
</tr>
</table>
That is the html example (as it's written in php)
CSS
.table {
background-color: #FFFFFF;
color: #000000;
}
.table th {
background-color: #333333;
color: #FFFFFF;
}
That's it so far. Looking for the values to use for I'm guessing the table tr css.
Saying different because even/odd doesn't work & it's dynamic php not strict html.
If you've already set the background color of your table to white, you just need to set the alternate row and hover backgrounds, like so:
.table tr {
transition: background 0.2s ease-in;
}
.table tr:nth-child(odd) {
background: silver;
}
.table tr:hover {
background: silver;
cursor: pointer;
}
Additionally, you probably don't need to repeat the table class on each row, FWIW. You can just target those rows using .table tr as I have done. If you're trying to make sure the table header and body styles don't interfere with each other, it's more semantic and just cleaner to wrap those elements in a thead and tbody:
<table class='table'>
<thead>
<tr>
<th>heading</th>
<th>heading 2</th>
<th>heading 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>col 1</td>
<td>col 2</td>
<td>col 3</td>
</tr>
<tr>
<td>col 1</td>
<td>col 2</td>
<td>col 3</td>
</tr>
<tr>
<td>col 1</td>
<td>col 2</td>
<td>col 3</td>
</tr>
</tbody>
</table>
You can achieve this with a little bit css, just use the n-th child selector, like this:
HTML:
<table class="alternate">
<tr>
<td>Row Col 1 </td>
<td>Row Col 2 </td>
</tr>
<tr>
<td>Row Col 1 </td>
<td>Row Col 2 </td>
</tr>
<tr>
<td>Row Col 1 </td>
<td>Row Col 2 </td>
</tr>
<tr>
<td>Row Col 1 </td>
<td>Row Col 2 </td>
</tr>
</table>
CSS:
.alternate tr:nth-child(2n) {
background-color: silver;
}
.alternate tr {
background-color: white;
}
.alternate tr:nth-child(2n):hover, .alternate tr:hover {
background-color: grey;
}
And here is a working fiddle, I hope that is what you were looking for.
I am styling table for my website. I want to have a table where first TR doesn't have border while others TR and their TD's have a border.
Code: http://jsfiddle.net/azq6xfnr/ or here:
.table2 {
border: 1px solid black;
border-collapse: collapse;
text-align: center;
}
.table2 .header {
background-color: #d8ff93;
color: #126f06;
border: 0;
}
.table2 td {
border: 1px solid #53f673;
padding: 10px;
}
.table2 tr:not(.header):nth-child(odd) {
background-color: #3cde53;
}
<table class="table2">
<tr class="header">
<td>Lp.</td>
<td>Column 1</td>
<td>Column 2</td>
</tr>
<tr>
<td>1</td>
<td>Row 1</td>
<td>Row 1</td>
</tr>
<tr>
<td>2</td>
<td>Row 2</td>
<td>Row 2</td>
</tr>
<tr>
<td>3</td>
<td>Row 3</td>
<td>Row 3</td>
</tr>
<tr>
<td>4</td>
<td>Row 4</td>
<td>Row 4</td>
</tr>
<tr>
<td>5</td>
<td>Row 5</td>
<td>Row 5</td>
</tr>
</table>
Use the CSS first-child selector. Here is a fiddle http://jsfiddle.net/r8p061hs/ or http://jsfiddle.net/r8p061hs/1/
.table2 {
border: 1px solid black;
border-collapse: collapse;
text-align: center;
}
.table2 .header {
background-color: #d8ff93;
color: #126f06;
border: 0;
}
.table2 td {
border: 1px solid #53f673;
padding: 10px;
}
.table2 tr:not(.header):nth-child(odd) {
background-color: #3cde53;
}
.table2 tr:first-child {
border: 1px solid #53f673;
}
.table2 tr:first-child td {
border: none;
}
<table class="table2">
<tr class="header">
<td>Lp.</td>
<td>Column 1</td>
<td>Column 2</td>
</tr>
<tr>
<td>1</td>
<td>Row 1</td>
<td>Row 1</td>
</tr>
<tr>
<td>2</td>
<td>Row 2</td>
<td>Row 2</td>
</tr>
<tr>
<td>3</td>
<td>Row 3</td>
<td>Row 3</td>
</tr>
<tr>
<td>4</td>
<td>Row 4</td>
<td>Row 4</td>
</tr>
<tr>
<td>5</td>
<td>Row 5</td>
<td>Row 5</td>
</tr>
</table>
I think css pseudo class :first-child could help you: http://www.w3schools.com/cssref/sel_firstchild.asp
You need to remove the border from both your table, and the cells in the .header row, no need to use :first-child or :first-of-type as you've given the row the class header
Demo Fiddle
.table2 {
border-collapse: collapse;
border-spacing:0;
text-align: center;
/* remove the border from here */
}
.table2 .header td{
border:none; /* and from here */
}
As an alternative to the other answers, if your intention is that the first row be styled this way to be a header row, you could also consider using the more semantic <thead> grouping with <th> elements, if that's practical. You could then class them (advisable) or just rely on the tag names (less advisable due to selector performance, but still possible).
By then grouping subsequent rows within a <tbody>, you could also simplify your alternate row colouring selector, as you would be able to avoid the :not pseudo-selector.
Example of adjusted code:
<table class="table2">
<thead class="header">
<tr><th>Lp.</th><th>Column 1</th><th>Column 2</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>Row 1</td><td>Row 1</td></tr>
<tr><td>2</td><td>Row 2</td><td>Row 2</td></tr>
<tr><td>3</td><td>Row 3</td><td>Row 3</td></tr>
<tr><td>4</td><td>Row 4</td><td>Row 4</td></tr>
<tr><td>5</td><td>Row 5</td><td>Row 5</td></tr>
</tbody>
</table>
I'm trying to change the background color of a table's rows using CSS, but I do not want to change a table heading's background. However, by default, a TH is wrapped in a TR, so the TR rule is pushed to my TH.
Here's a jsfiddle to test with, if it helps:
http://jsfiddle.net/jomanlk/Bcayc/
You can add <thead> and <tbody> to differenciate your header rows from the data rows. This way you can target only the desired ones:
table tbody td:hover{
background: #f00;
}
table tbody tr:hover{
background: #00f;
}
DEMO
Along with the following markup:
<table>
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<th>Col 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
</tr>
</tbody>
</table>
Looks like the best method has been posted using thead and tbody.
Alternatively, as a concept, you could add a class to the header-tr, and define a static background color, place after the hover condition in the .css
table td:hover{
background: #f00;
}
table td:hover{
background: #00f;
}
table .nohover:hover{
background: #fff;
}
<table>
<tr class="nohover">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
</tr>
</table>
OR every second row + hover
tbody tr:nth-child(2n), tbody tr:hover{
background-color: #e3e3e3;
}