In the HTML table, I am trying to apply border-radius on the column group but it is not working. Is there any way to fix this?
I have to implement accessibility on table view due to which I couldn't opt for other alternative solutions.
How can I apply the border-radius on the column group?
table{
border-collapse: collapse;
border-spacing: 30px;
}
td {
padding: 5px;
}
colgroup > col.selected{
border: 1.5px solid #2698d6;
box-shadow: 0px 4px 31px rgba(96, 96, 96, 0.1);
border-radius: 8px;
}
<table>
<colgroup>
<col span="1" class="selected" />
</colgroup>
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
<td>Column 4</td>
</tr>
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
<td>Column 4</td>
</tr>
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
<td>Column 4</td>
</tr>
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
<td>Column 4</td>
</tr>
</table>
you can apply for td like below,
table {
border-collapse: separate;
border-spacing: 0 16px;
}
tr td {
border: 1px solid transparent;
transition: all ease 0.3s;
padding: 5px;
}
td {
border-radius: 10px;
}
td:hover
{
border: 1px solid green;
}
<body>
<table>
<tbody>
<tr>
<td>01</td>
<td>02</td>
<td>03</td>
<td>04</td>
<td>05</td>
<td>06</td>
</tr>
<tr>
<td>07</td>
<td>08</td>
<td>09</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
</tbody>
</table>
</body>
please comment if any query
Related
I have a table that looks like this:
$(document).ready(function() {
$('.band tr.highlight').next('tr').each(function() {
$(this).addClass('transparent');
});
});
table {
border-collapse: collapse;
}
th {
text-align: left;
color: white;
padding: .5rem;
}
th:nth-child(odd) {
background-color: darkgray;
}
th:nth-child(even) {
background-color: green;
}
tr.highlight {
background-color: red;
color: white;
}
.band tr:nth-child(even):not(.highlight) td {
background-color: gray;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="band">
<thead>
<tr>
<th>heading 1</th>
<th>heading 2</th>
<th>heading 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>info 1</td>
<td>info 2</td>
<td>info 3</td>
</tr>
<tr>
<td>info 1</td>
<td>info 2</td>
<td>info 3</td>
</tr>
<tr class="highlight">
<td colspan="3">section 2</td>
</tr>
<tr>
<td>info 1</td>
<td>info 2</td>
<td>info 3</td>
</tr>
<tr>
<td>info 1</td>
<td>info 2</td>
<td>info 3</td>
</tr>
<tr class="highlight">
<td colspan="3">section 3</td>
</tr>
<tr>
<td>info 1</td>
<td>info 2</td>
<td>info 3</td>
</tr>
<tr>
<td>info 1</td>
<td>info 2</td>
<td>info 3</td>
</tr>
</tbody>
</table>
The issue is that I would like the first row of each section to be transparent. Then alternate color/transparent for the remaining rows in the section. I added a "transparent" class to the row 's after the section row, but I am not sure how to start a loop or the like on the remaining rows. How can I add to the script (css solutions are great too) to handle the remaining rows?
This is my solution, I first added the transparent class to the first row after highlight class, then use the nextUntil method to loop through the next rows until another highlight, I added the class gray for the other rows, and this is the demo:
$(document).ready(function() {
$('.band tr.highlight').next('tr').each(function() {
$(this).addClass('transparent');
var i = 1;
$(this).nextUntil('.highlight').each(function() {
if (i % 2 === 0) {
$(this).addClass('transparent');
} else {
$(this).addClass('gray');
}
i++;
});
});
});
table {
border-collapse: collapse;
}
th {
text-align: left;
color: white;
padding: .5rem;
}
th:nth-child(odd) {
background-color: darkgray;
}
th:nth-child(even) {
background-color: green;
}
tr.highlight {
background-color: red;
color: white;
}
.band tr:nth-child(even):not(.highlight), .band tr.gray{
background-color: gray;
}
.band tr.transparent {
background-color: transparent !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="band">
<thead>
<tr>
<th>heading 1</th>
<th>heading 2</th>
<th>heading 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>info 1</td>
<td>info 2</td>
<td>info 3</td>
</tr>
<tr>
<td>info 1</td>
<td>info 2</td>
<td>info 3</td>
</tr>
<tr class="highlight">
<td colspan="3">section 2</td>
</tr>
<tr>
<td>info 1</td>
<td>info 2</td>
<td>info 3</td>
</tr>
<tr>
<td>info 1</td>
<td>info 2</td>
<td>info 3</td>
</tr>
<tr class="highlight">
<td colspan="3">section 3</td>
</tr>
<tr>
<td>info 1</td>
<td>info 2</td>
<td>info 3</td>
</tr>
<tr>
<td>info 1</td>
<td>info 2</td>
<td>info 3</td>
</tr>
</tbody>
</table>
I'm helping with an interactive table in a dashboard. Clicking rows in the table alters the data displayed on the rest of the dashboard. The table rows can have a 'selected' class, where the selected row is given a 4px bold border. The rows also have a :hover selector that gives them a 2px border.
My issue is that when using Mozilla Firefox V 56.0.1 this causes the rows between the row being hovered over and the selected row to be given a 4px border on the left and right sides of the row. See below for details.
Unintended behavior
Intended behavior
Here is the code:
HTML and CSS in CodePen
https://codepen.io/anon/pen/MOzJNZ
table {
border-collapse: collapse;
}
tr.notselected:hover {
border: 2px solid black;
padding: 2px;
}
tr.selected {
border: 4px solid black; }
<table>
<tr>
<td></td>
<td colspan="2">Header 1</td>
<td colspan="2">Header 2</td>
</tr>
<tr>
<td></td>
<td>Subheader 1.1</td>
<td>Subheader 1.2</td>
<td>Subheader 2.1</td>
<td>Subheader 2.2</td>
</tr>
<tr class="selected">
<td>Row 1</td>
<td >10.1</td>
<td >10.6</td>
<td >9.1</td>
<td >9.4</td>
</tr>
<tr class="notselected">
<td>Row 2</td>
<td>12.9</td>
<td>11.3</td>
<td>10.1</td>
<td>10.5</td>
</tr>
<tr class="notselected">
<td>Row 3</td>
<td></td>
<td></td>
<td>8.7</td>
<td>8.8</td>
</tr>
<tr class="notselected">
<td>Row 3</td>
<td>7.9</td>
<td>7.9</td>
<td></td>
<td></td>
</tr><tr class="notselected">
<td>Row 4</td>
<td></td>
<td></td>
<td>9.2</td>
<td>8.4</td>
</tr>
<tr class="notselected">
<td>Row 5</td>
<td>12.2</td>
<td>11.9</td>
<td>7.3</td>
<td>9.0</td>
</tr>
</table>
Added following class in order to fix firefox issue:
tr.notselected {
border: 0px solid black;
}
table {
border-collapse: collapse;
}
tr.notselected:hover {
border: 2px solid black;
padding: 2px;
}
tr.selected {
border: 4px solid black;
}
tr.notselected:hover td {
padding-bottom: 6px; }
tr.notselected {
border: 0px solid black;
}
<table>
<tr>
<td></td>
<td colspan="2">Header 1</td>
<td colspan="2">Header 2</td>
</tr>
<tr>
<td></td>
<td>Subheader 1.1</td>
<td>Subheader 1.2</td>
<td>Subheader 2.1</td>
<td>Subheader 2.2</td>
</tr>
<tr class="selected">
<td>Row 1</td>
<td >10.1</td>
<td >10.6</td>
<td >9.1</td>
<td >9.4</td>
</tr>
<tr class="notselected">
<td>Row 2</td>
<td>12.9</td>
<td>11.3</td>
<td>10.1</td>
<td>10.5</td>
</tr>
<tr class="notselected">
<td>Row 3</td>
<td></td>
<td></td>
<td>8.7</td>
<td>8.8</td>
</tr>
<tr class="notselected">
<td>Row 3</td>
<td>7.9</td>
<td>7.9</td>
<td></td>
<td></td>
</tr><tr class="notselected">
<td>Row 4</td>
<td></td>
<td></td>
<td>9.2</td>
<td>8.4</td>
</tr>
<tr class="notselected">
<td>Row 5</td>
<td>12.2</td>
<td>11.9</td>
<td>7.3</td>
<td>9.0</td>
</tr>
</table>
I'm having a problem in :hover.
I want to make the last tr of that tbody also change color when its tbody is hovered. The problem is the last tr has its own class.
Here is the structure of my code:
.cust-table {
border: 1px solid black;
border-collapse: collapse;
width: 100%;
}
.cust-table td {
border: 1px solid black;
padding: 10px;
}
.cust-table tbody:nth-child(even){
background-color: white;
}
.cust-table tbody:nth-child(odd){
background-color: green;
}
.cust-color {
background-color: blue;
}
.cust-table tbody:hover {
background-color: yellow;
}
<table class="cust-table">
<tbody>
<tr>
<td rowspan="2">A</td>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr class="cust-color">
<td colspan="3">Cust color</td>
</tr>
</tbody>
<tbody>
<tr>
<td rowspan="2">B</td>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr class="cust-color">
<td colspan="3">Cust color</td>
</tr>
</tbody>
<tbody>
<tr>
<td rowspan="2">C</td>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr class="cust-color">
<td colspan="3">Cust color</td>
</tr>
</tbody>
</table>
I tried adding cust-color:hover but as expected, it only works when the <tr> with cust-color is hovered.
Use this rule to set the custom color only if the tbody is not hovered:
tbody:not(:hover) .cust-color {
background-color: blue;
}
.cust-table {
border: 1px solid black;
border-collapse: collapse;
width: 100%;
}
.cust-table td {
border: 1px solid black;
padding: 10px;
}
.cust-table tbody:nth-child(even){
background-color: white;
}
.cust-table tbody:nth-child(odd){
background-color: green;
}
tbody:not(:hover) .cust-color {
background-color: blue;
}
.cust-table tbody:hover {
background-color: yellow;
}
<table class="cust-table">
<tbody>
<tr>
<td rowspan="2">A</td>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr class="cust-color">
<td colspan="3">Cust color</td>
</tr>
</tbody>
<tbody>
<tr>
<td rowspan="2">B</td>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr class="cust-color">
<td colspan="3">Cust color</td>
</tr>
</tbody>
<tbody>
<tr>
<td rowspan="2">C</td>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr class="cust-color">
<td colspan="3">Cust color</td>
</tr>
</tbody>
</table>
Ori Drori's answer is probably the best, but here is an alternative solution:
.cust-table tbody:hover, .cust-table tbody:hover tr.cust-color {
background-color: yellow;
}
Overrides the tr color when its parent tbody is hovered.
Add a rule for that specific tr:
.cust-table tbody:hover,
.cust-table tbody:hover .cust-color{
background-color: yellow;
}
I have been able to create four equi-sized/shaped quadrants on my page based on the accepted answer here.
So the page now looks like so:
I want to now give the quadrants some "elbow room" - some blank space around their edges. I tried adding margin to the classes they use:
.topleft {
background-color: blue;
margin: 4;
}
.topright {
background-color: red;
margin: 4;
}
.bottomleft {
background-color: green;
margin: 4;
}
.bottomright {
background-color: yellow;
margin: 4;
}
That did nothing; I tried then adding padding:
.topleft {
background-color: blue;
padding: 4;
}
.topright {
background-color: red;
padding: 4;
}
.bottomleft {
background-color: green;
padding: 4;
}
.bottomright {
background-color: yellow;
padding: 4;
}
...and that also did nothing.
What do I need to do to keep the same 1/4 space for all, but effectively "squish" them a scosh by adding margin between them or padding around them?
Here is the entire html/css:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>eServices Customer Dashboard</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Inline CSS (don't tell the CSS-Whisperers I did this!) -->
<style>
body {
background-color: azure;
}
.body-content {
-webkit-box-shadow: -1px 0 5px 0 #000000;
-webkit-box-shadow: -1px 0 5px 0 rgba(0, 0, 0, .25);
box-shadow: -1px 0 5px 0 #000000;
box-shadow: -1px 0 5px 0 rgba(0, 0, 0, .5);
padding-left: 1px;
padding-right: 1px;
padding-bottom: 15px;
}
.jumbotronjr {
padding: 12px;
margin-bottom: -16px;
font-size: 21px;
font-weight: 200;
color: inherit;
background-color: white;
}
.addltopmargin {
margin-top: 8px;
}
.sectiontext {
font-size: 1.5em;
font-weight: bold;
font-family: Candara, Calibri, Cambria, serif;
}
.bottommarginbreathingroom {
margin-bottom: 2px;
}
.marginaboveandbelow {
margin-top: 15px;
margin-bottom: 15px;
}
.rightjustifytext {
text-align: right;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
.contents{
height:50%;
width:100%;
}
redfont {
color: red;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
width: 100vw;
height: 100vh;
display: flex;
flex-wrap: wrap;
}
.container div {
display: inline-block;
width: 50vw;
height: 50vh;
overflow-y: scroll;
}
.topleft {
background-color: blue;
padding: 4;
}
.topright {
background-color: red;
padding: 4;
}
.bottomleft {
background-color: green;
padding: 4;
}
.bottomright {
background-color: yellow;
padding: 4;
}
</style>
</head>
<body>
<div class="contents">
<div class="row">
<div class="col-md-6 topleft">
<h2>Top 10 Items Purchased</h2>
<div>
<input type="date" class="bottommarginbreathingroom" id="daterangefrom2" name="daterangefrom2">
</input>
<label> to </label>
<input type="date" class="bottommarginbreathingroom" id="daterangeto2" name="daterangeto2">
</input>
</div>
<table>
<tr>
<th>Item Code</th>
<th>Description</th>
<th>Qty</th>
</tr>
<tr>
<td>Item Code 1</td>
<td>Description 1</td>
<td>Qty 1</td>
</tr>
<tr>
<td>Item Code 2</td>
<td>Description 2</td>
<td>Qty 2</td>
</tr>
<tr>
<td>Item Code 3</td>
<td>Description 3</td>
<td>Qty 3</td>
</tr>
<tr>
<td>Item Code 4</td>
<td>Description 4</td>
<td>Qty 4</td>
</tr>
<tr>
<td>Item Code 5</td>
<td>Description 5</td>
<td>Qty 5</td>
</tr>
<tr>
<td>Item Code 6</td>
<td>Description 6</td>
<td>Qty 6</td>
</tr>
<tr>
<td>Item Code 7</td>
<td>Description 7</td>
<td>Qty 7</td>
</tr>
<tr>
<td>Item Code 8</td>
<td>Description 8</td>
<td>Qty 8</td>
</tr>
<tr>
<td>Item Code 9</td>
<td>Description 9</td>
<td>Qty 9</td>
</tr>
<tr>
<td>Item Code 10</td>
<td>Description 10</td>
<td>Qty 10</td>
</tr>
</table>
</div>
<div class="col-md-6 topright">
<h2>Pricing Exceptions - Weekly Recap</h2>
<h3 class="redfont">Red denotes Contract Item Overages</h3>
<h3>For Weyand on the pricing week of - 7/31/2016</h3>
<table>
<tr>
<th>Invoice No</th>
<th>Invoice Date</th>
<th>Customer</th>
<th>Cust #</th>
<th>Item Code</th>
<th>Description</th>
<th>Member Item Code</th>
<th>Member Description</th>
<th>Bid Price</th>
<th>Sell Price</th>
<th>Qty</th>
</tr>
<tr>
<td>Inv No 1</td>
<td>Inv Date 1</td>
<td>Customer 1</td>
<td>Cust # 1</td>
<td>Item Code 1</td>
<td>Descrip. 1</td>
<td>M.I. Code 1</td>
<td>Memb Desc 1</td>
<td>Bid Price 1</td>
<td>Sell Pr. 1</td>
<td>Qty 1</td>
</tr>
<tr>
<td>Inv No 2</td>
<td>Inv Date 2</td>
<td>Customer 2</td>
<td>Cust # 2</td>
<td>Item Code 2</td>
<td>Descrip. 2</td>
<td>M.I. Code 2</td>
<td>Memb Desc 2</td>
<td>Bid Price 2</td>
<td>Sell Pr. 2</td>
<td>Qty 2</td>
</tr>
<tr>
<td>Inv No 3</td>
<td>Inv Date 3</td>
<td>Customer 3</td>
<td>Cust # 3</td>
<td>Item Code 3</td>
<td>Descrip. 3</td>
<td>M.I. Code 3</td>
<td>Memb Desc 3</td>
<td>Bid Price 3</td>
<td>Sell Pr. 3</td>
<td>Qty 3</td>
</tr>
</table>
</div>
</div>
<div class="row">
<div class="col-md-6 bottomleft">
<h2>Forecasted Spend</h2>
<table>
<tr>
<th>Item</th>
<th>Last Week's Usage</th>
<th>This Week's Price</th>
<th>Forecasted Spend</th>
</tr>
<tr>
<td>Item 1</td>
<td>52</td>
<td>TWP 1</td>
<td>68.00</td>
</tr>
<tr>
<td>Item 2</td>
<td>49</td>
<td>TWP 2</td>
<td>65.00</td>
</tr>
<tr>
<td>Item 3</td>
<td>46</td>
<td>TWP 3</td>
<td>63.00</td>
</tr>
<tr>
<td>Item 4</td>
<td>42</td>
<td>TWP 4</td>
<td>60.00</td>
</tr>
<tr>
<td>Item 5</td>
<td>40</td>
<td>TWP 5</td>
<td>58.00</td>
</tr>
<tr>
<td>Item 6</td>
<td>42</td>
<td>TWP 6</td>
<td>60.00</td>
</tr>
<tr>
<td>Item 7</td>
<td>43</td>
<td>TWP 7</td>
<td>61.00</td>
</tr>
<tr>
<td>Item 8</td>
<td>43</td>
<td>TWP 8</td>
<td>61.00</td>
</tr>
<tr>
<td>TOTAL</td>
<td>314</td>
<td></td>
<td>$496.00</td>
</tr>
</table>
</div>
<div class="col-md-6 bottomright">
<h2>Fill Rate</h2>
<table>
<tr>
<th>Unit</th>
<th>Co. Name</th>
<th>Desc</th>
<th>Ord</th>
<th>Ship</th>
<th>Var</th>
</tr>
<tr>
<td>Unit 1</td>
<td>Co. Name 1</td>
<td>Desc 1</td>
<td>40</td>
<td>40</td>
<td>0</td>
</tr>
<tr>
<td>Unit 2</td>
<td>Co. Name 2</td>
<td>Desc 2</td>
<td>40</td>
<td>40</td>
<td>0</td>
</tr>
<tr>
<td>Unit 3</td>
<td>Co. Name 3</td>
<td>Desc 3</td>
<td>40</td>
<td>40</td>
<td>0</td>
</tr>
<tr>
<td>Unit 4</td>
<td>Co. Name 4</td>
<td>Desc 4</td>
<td>40</td>
<td>40</td>
<td>0</td>
</tr>
<tr>
<td>Unit 5</td>
<td>Co. Name 5</td>
<td>Desc 5</td>
<td>40</td>
<td>40</td>
<td>0</td>
</tr>
<tr>
<td>Unit 6</td>
<td>Co. Name 6</td>
<td>Desc 6</td>
<td>40</td>
<td>40</td>
<td>0</td>
</tr>
<tr>
<td>Unit 7</td>
<td>Co. Name 7</td>
<td>Desc 7</td>
<td>40</td>
<td>39</td>
<td>1</td>
</tr>
<tr>
<td>Unit 8</td>
<td>Co. Name 8</td>
<td>Desc 8</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>TOTAL</td>
<td></td>
<td></td>
<td>280</td>
<td>279</td>
<td>1</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
UPDATE
Adding padding just has the appearance of bloating the quadrants, not providing any breathing room between them. It looks more or less as if a "top" property was assigned to the first element, pushing it further down.
Adding margin (16px) causes the quadrants to line up vertically on the page - all on the left, nothing on the right. The four pieces are stacked vertically, each one atop the next.
Both margin and padding take CSS length units. There's a lot of different ones as they classify in absolute units (pixels or px being the most common) or relative ones (em, rem being the most common). You may also use a dimension value which is given by percentages % even though is not a length value.
For the full list and an in-depth explanation please refer here.
In your case probably padding will help you out, and you may want to use a bigger value than 4px.
Don't add new classes to the divs containing the bootstrap column classes. Instead, create a child div and apply your styles to the inner div.
For example:
Replace
<div class="row">
<div class="col-md-6 topleft">
...
</div>
</div>
with
<div class="row">
<div class="col-md-6">
<div class="topleft">
...
</div>
</div>
</div>
This way you're controlling the overall boundary of the container in the outer div and styling it (adding margins, padding) in the inner div.
Also, use px/em units for padding/margin as others suggested.
Codepen: http://codepen.io/anon/pen/vKQwyg
Add a unit to your margin / padding, such as px (absolute) or em (relative). Please refer to this: http://www.w3schools.com/css/css_padding.asp
Give the unit of margin & padding property like px, em. Try giving margin: 4px;. But 4px seem very small.
I have table with td rowspan and has 3 rows so how can I make those rows with no border while keeping the main one with border?
here is the table..
I want to make it look like this, I have edited this with paint just erased the lines.
here is the jsfiddle demo
here is my html code
<table id="Table">
<thead>
<tr>
<th>Track</th><th>Car</th>
<th></th>
<th>Score</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">LIST 1</td>
<td>Name 1</td>
<td>LT</td>
<td>59,800</td>
<td>8 days ago</td>
</tr>
<tr>
<td>Name 2</td>
<td>TR</td>
<td>58,000</td>
<td>10 days ago</td>
</tr>
<tr>
<td>Name 3</td>
<td>SO</td>
<td>60,000</td>
<td>8 days ago</td>
</tr>
<tr>
<td>LIST 2</td>
<td>Name 4</td>
<td>NL</td>
<td>60,000</td>
<td>8 days ago</td>
</tr>
<tr>
<td>LIST 3</td>
<td>Name 5</td>
<td>NR</td>
<td>59,000</td>
<td>9 days ago</td>
</tr>
<tr>
<td>LIST 4</td>
<td>Name 6</td>
<td>FI</td>
<td>57,000</td>
<td>10 days ago</td>
</tr>
</tbody>
</table>
and css
#Table {
table-layout:fixed;
width: 400px;
text-align: left;
border-collapse:collapse;
}
#Table th {
background: #F9F9F9;
border-bottom: solid 1px black;
padding-top: 3px;
padding-bottom: 4px;
}
#Table td {
background: #F9F9F9;
border-bottom: 1px solid black;
padding-top: 3px;
padding-bottom: 4px;
}
#Table th:nth-child(1) { width:180px; }
#Table th:nth-child(2) { width:200px; }
#Table th:nth-child(3) { width:30px; }
#Table th:nth-child(4) { width:80px; }
#Table th:nth-child(5) { width:120px; }
A better solution would be to move the border-bottom style to the <tr> (instead of <td>) and to use a custom class to specify if your <tr> needs border or not.
See you updated jsfiddle.
CSS added/modified :
/* modified */
#Table td {
/*border-bottom: 1px solid #cccccc;*/
padding-top: 3px;
padding-bottom: 4px;
}
/*added*/
#Table tr{
border-bottom: 1px solid #CCC;
}
#Table tr.no-border-row {
border-bottom: none;
}
HTML:
<table id="Table">
<thead>
<tr>
<th>Track</th>
<th>Car</th>
<th></th>
<th>Score</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr class="no-border-row">
<td rowspan="3">LIST 1</td>
<td>Name 1</td>
<td>LT</td>
<td>59,800</td>
<td>8 days ago</td>
</tr>
<tr class="no-border-row">
<td>Name 2</td>
<td>TR</td>
<td>58,000</td>
<td>10 days ago</td>
</tr>
<tr>
<td>Name 3</td>
<td>SO</td>
<td>60,000</td>
<td>8 days ago</td>
</tr>
<tr>
<td>LIST 2</td>
<td>Name 4</td>
<td>NL</td>
<td>60,000</td>
<td>8 days ago</td>
</tr>
<tr>
<td>LIST 3</td>
<td>Name 5</td>
<td>NR</td>
<td>59,000</td>
<td>6 days ago</td>
</tr>
<tr>
<td>LIST 4</td>
<td>Name 6</td>
<td>FI</td>
<td>57,000</td>
<td>1 month ago</td>
</tr>
</tbody>
</table>
Add this to your CSS:
#Table tbody tr:nth-child(1) td:not(:first-child) { border-bottom: none; }
#Table tbody tr:nth-child(2) td { border-bottom: none; }
Example: http://jsfiddle.net/uerdg8gm/1/