I would like to make an HTML table with rounded corners and rows dividers.
However, it looks like they are mutually exclusive:
rows dividers tr {border-bottom: 1px solid #000000} require
border-collapse: collapse to work
table rounded corners table { border-radius: 4px } don't work with
border-collapse: collapse
how can I achieve this?
You can wrap the table inside a div, and give that div a border-radius plus overflow:hidden.
A div is a block element, so i used display:table on it to have the width of the table. But you can use inline-block or other.
See below
td {
padding: 10px;
background: red;
}
tr {
border-bottom: 2px solid #000000;
}
table {
border-collapse: collapse;
}
.wrapper {
border-radius: 10px;
border: 2px solid green;
display: table;
overflow: hidden;
}
<div class="wrapper">
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</div>
don't add the border radius to the table itself. try to wrap the table inside a div element, then add the border-radius to the div element.
In the example below, there is a border on top of the right cell. It only appears in Chrome, is it a Chrome bug?
HTML / CSS
html,
body {
height: 100%;
}
table {
border-collapse: collapse;
width: 100%;
height: 100%;
}
.left {
border-right: 1px #aaaaaa solid;
border-top: 1px #aaaaaa solid;
}
<table>
<tr>
<td colspan=2>top</td>
</tr>
<tr>
<td class="left">left</td>
<td>right</td>
</tr>
</table>
Here is the example as a fiddle.
Chrome Screenshot
This appears to be the same bug listed here (or similar)
An easy workaround is at the bottom of this answer.
This is a relevant comment under that bug report:
It's a known (old) issue in our table code. Collapsing borders are
determined based on adjacent cells and our code doesn't deal correctly
with spanning cells (we only consider the cell adjoining the first row
/ column in a row / column span). On top of that, our border
granularity is determined by the cell's span.
To fix this bug, we would need to overhaul our collapsing border code,
which is a big undertaking.
Here is an example that highlights the same problem:
html,
body {
height: 100%;
}
table {
border-collapse: collapse;
width: 100%;
height: 100%;
}
.left {
border-right: 1px #aaaaaa solid;
border-top: 1px #aaaaaa solid;
}
.right {
border-top: double 20px #F00;
}
<table>
<tr>
<td colspan=2>top</td>
</tr>
<tr>
<td class="left">left</td>
<td class="right">right</td>
</tr>
</table>
I added this:
.right { border-top: double 20px #F00; }
Which results in this in Chrome:
That grey border would not be between the double red border if it was not a bug.
For comparison, this is how it should look (taken in Firefox):
Here are the rules of border conflicts:
Rule 1: You do not talk about border conflicts
The following rules determine which border style "wins" in case of a conflict:
Borders with the 'border-style' of 'hidden' take precedence over all other conflicting borders. Any border with this value suppresses all borders at this location.
Borders with a style of 'none' have the lowest priority. Only if the border properties of all the elements meeting at this edge are 'none' will the border be omitted (but note that 'none' is the default value for the border style.)
If none of the styles are 'hidden' and at least one of them is not 'none', then narrow borders are discarded in favor of wider ones. If several have the same 'border-width' then styles are preferred in this order: 'double', 'solid', 'dashed', 'dotted', 'ridge', 'outset', 'groove', and the lowest: 'inset'.
If border styles differ only in color, then a style set on a cell wins over one on a row, which wins over a row group, column, column group and, lastly, table. When two elements of the same type conflict, then the one further to the left (if the table's 'direction' is 'ltr'; right, if it is 'rtl') and further to the top wins.
Workaround
Here is a workaround, just don't use border-collapse: collapse:
table {
border-collapse: separate; /* the default option */
border-spacing: 0; /* remove border gaps */
}
td {
padding: 20px;
border-right: solid 1px #CCC;
border-bottom: solid 1px #CCC;
}
td:first-child {
border-left: solid 1px #CCC;
}
table {
border-top: solid 1px #CCC
}
<table>
<tr>
<td colspan="3"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
table {
border-collapse: separate; /* the default option */
border-spacing: 0; /* remove border gaps */
}
td {
padding: 20px;
border-right: solid 1px #CCC;
border-bottom: solid 1px #CCC;
}
td:first-child {
border-left: solid 1px #CCC;
}
table {
border-top: solid 1px #CCC
}
Since its a Chrome-Bug let's think up a workaround. So far I only came up with one that involves changing the html:
http://jsfiddle.net/5366whmf/24/
It adds another row:
<table style="border-collapse: collapse">
<tr><td colspan=2>top</td></tr>
<tr><td style="height: 0"></td></tr> <!-- fix for chrome -->
<tr><td style="border-top: 1px solid red">left</td><td>right</td></tr>
</table>
I have created this very simple fiddle to reproduce the issue. I does what's expected in firefox but not in chrome. Is there a workaround to achieve the same purpose ?
Here is the HTML code:
<table cellpadding="1">
<thead>
<tr>
<th>Adskldj</th>
<th>dfsdfd</th>
</tr>
</thead>
<tbody>
<tr><th>Adskldj</th><th>dfsdfd</th></tr>
<tr><th>Adskldj</th><th>dfsdfd</th></tr>
<tr><th>Adskldj</th><th>dfsdfd</th></tr>
<tr><th>Adskldj</th><th>dfsdfd</th></tr>
</tbody>
</table>
And the CSS
table {
border-collapse:collapse;
}
td, th {
border-top: 1px solid #888;
border-bottom: 1px solid #888;
padding: 30px;
}
thead {
background-color: #DDD;
box-shadow:inset 0 0 10px #000000;
}
I believe that box-shadow needs to be on a block level element. Hence it not working on a thead.
I have tried to find the spec, but still. Block Level.
I've had success using the CSS3 fancy-ness by bypassing table tags and using css display properties instead, making a class for each native table-element and applying it to a <div> or other element.
CSS such as:
.row{
display:table-row;
}
.cell{
display:table-cell;
}
etc.
This allows some nice effects that are not possible using regular tables.
I have a table of 3 by 3. I need a way to add a border for the bottom of every row tr and give it a specific color.
First I tried the direct way, i.e.:
<tr style="border-bottom:1pt solid black;">
But that didn't work. So I added CSS like this:
tr {
border-bottom: 1pt solid black;
}
That still didn't work.
I would prefer to use CSS because then I don't need to add a style attribute to every row.
I haven't added a border attribute to the <table>. I hope that that is not affecting my CSS.
Add border-collapse:collapse to your table rule:
table {
border-collapse: collapse;
}
Example
table {
border-collapse: collapse;
}
tr {
border-bottom: 1pt solid black;
}
<table>
<tr><td>A1</td><td>B1</td><td>C1</td></tr>
<tr><td>A2</td><td>B2</td><td>C2</td></tr>
<tr><td>A2</td><td>B2</td><td>C2</td></tr>
</table>
Link
I had a problem like this before. I don't think tr can take a border styling directly. My workaround was to style the tds in the row:
<tr class="border_bottom">
CSS:
tr.border_bottom td {
border-bottom: 1px solid black;
}
Use border-collapse:collapse on table and border-bottom: 1pt solid black; on the tr
Use
border-collapse:collapse as Nathan wrote and you need to set
td { border-bottom: 1px solid #000; }
There are lot of incomplete answers here. Since you cannot apply a border to tr tag, you need to apply it to the td or th tags like so:
td {
border-bottom: 1pt solid black;
}
Doing this will leave a small space between each td, which is likely not desirable if you want the border to appear as though it is the tr tag. In order to "fill in the gaps" so to speak, you need to utilize the border-collapse property on the table element and set its value to collapse, like so:
table {
border-collapse: collapse;
}
You can use the box-shadow property to fake a border of a tr element. Adjust Y position of box-shadow (below represented as 2px) to adjust thickness.
tr {
-webkit-box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.99);
-moz-box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.99);
box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.99);
}
I tried adding
table {
border-collapse: collapse;
}
alongside the
tr {
bottom-border: 2pt solid #color;
}
and then commented out border-collapse to see what worked. Just having the tr selector with bottom-border property worked for me!
No Border CSS ex.
No Border Photo live
CSS Border ex.
Table with Border photo live
Use
table{border-collapse:collapse}
tr{border-top:thin solid}
Replace "thin solid" with CSS properties.
Display the row as a block.
tr {
display: block;
border-bottom: 1px solid #000;
}
and to display alternate colors simply:
tr.oddrow {
display: block;
border-bottom: 1px solid #F00;
}
Another solution to this is border-spacing property:
table td {
border-bottom: 2px solid black;
}
table {
border-spacing: 0px;
}
<table>
<tr>
<td>ABC</td>
<td>XYZ</td>
</table>
If you don't want to
enforce border collapse on the table
use the TD elements styling
You can use the ::after selector to add borders to TR :
table tbody tr {
position : relative; # to contain the ::after element within the table-row
}
table tbody tr td {
position : relative; # needed to apply a z-index
z-index : 2; # needs to be higher than the z-index on the tr::after element
}
table tbody tr::after {
content : '';
position : absolute;
z-index : 1; # Add a z-index below z-index on TD so you can still select data from your table rows :)
top : 0px;
left : 0px;
width : 100%;
height : 100%;
border : 1px solid green; # Style your border here, choose if you want a border bottom, top, left, etc ...
}
It is a simple trick that I used in a scenario where I had to put spaces between table-rows so I wasn't able to add a border collapse on the table, the end result :
Hope it helps :)
I found when using this method that the space between the td elements caused a gap to form in the border, but have no fear...
One way around this:
<tr>
<td>
Example of normal table data
</td>
<td class="end" colspan="/* total number of columns in entire table*/">
/* insert nothing in here */
</td>
</tr>
With the CSS:
td.end{
border:2px solid black;
}
<td style="border-bottom-style: solid; border-bottom: thick dotted #ff0000; ">
You can do the same to the whole row as well.
There is border-bottom-style, border-top-style,border-left-style,border-right-style. Or simply border-style that apply to all four borders at once.
You can see (and TRY YOURSELF online) more details here
Several interesting answers. Since you just want a border bottom (or top) here are two more. Assuming you want a blue border 3px thick. In the style section you could add
.blueB {background-color:blue; height:3px} or
hr {background-color:blue; color:blue height:3px}
In the table code either
<tr><td colspan='3' class='blueB></td></tr> or
<tr><td colspan='3'><hr></td></tr>
No CSS border bottom:
<table>
<thead>
<tr>
<th>Title</th>
</tr>
<tr>
<th>
<hr>
</th>
</tr>
</thead>
</table>
You can't put a border on a tr element. This worked for me in firefox and IE 11:
<td style='border-bottom:1pt solid black'>
HTML
<tr class="bottom-border">
</tr>
CSS
tr.bottom-border {
border-bottom: 1px solid #222;
}
Here is HTML:
<table>
<tr>
<td>Smth:</td>
<td>Lalala</td>
</tr>
</table>
Here is CSS:
table
{
border: 1px dotted black;
border-radius: 25px;
}
table td
{
padding: 15px;
}
When I use border-radius and border together, it messes up.
Is it possible to correct that? (I can't show it in jsFiddle, because border-radius doesn't work there)
table {border-collapse:separate;}
http://jsfiddle.net/seler/28p9W/