I am trying to make a table with rounded corners AND a single solid border between <tr>'s. However, I seem to have a bit of a problem correctly using border-collapse. When I set border-collapse: separate, I get the following:
Result - border-collapse: separate
Code
HTML
<table>
<tr>
<td>
This
</td>
<td>
that
</td>
<td>
the other.
</td>
</tr>
<tr>
<td>
This
</td>
<td>
that
</td>
<td>
the other.
</td>
</tr>
</table>
CSS
table, tr {
border: 1px solid black;
border-collapse: separate;
border-color: #ACACAC;
border-radius: 5px;
}
However, when I use border-collapse: collapse, I get the correct line between the <tr>'s but the corners are not rounded, as see here:
Result - border-collapse: collapse
Does anyone know how to get both the line between the <tr>'s WITH the rounded corners?
Thanks so much!
Add cellpadding = 0 and cellspacing = 0 at the table element ,remove border-bottom of the tr elments and add this CSS border-bottom for all td elements except last one like:
tr:not(:last-child) td{
border-bottom:1pt solid #ACACAC;
}
table,
tr {
border: 1px solid black;
border-color: #ACACAC;
border-radius: 5px;
}
td {
padding: 5px;
}
tr:not(:last-child) td {
border-bottom: 1pt solid #ACACAC;
}
<table cellspacing=0 cellpadding=0>
<tr>
<td>
This
</td>
<td>
that
</td>
<td>
the other.
</td>
</tr>
<tr>
<td>
This
</td>
<td>
that
</td>
<td>
the other.
</td>
</tr>
</table>
It is working :
http://jsfiddle.net/csdtesting/dngpq4hb/3/
Related
I was wondering if it was possible, with html and/or CSS, to collapse only tr with he table's outline, while having different border styles for the table's outline and trs, and the tds and ths.
I know this is complicated, so if this can make it clearer, here's a drawing of what I'm trying to achieve:
No, border-collapse applies only to the whole table, and it is not a valid property for tr or td elements so you cannot apply it to those to get a different spacing.
However you can “fake” it by adding the cell content into a div and using it for some of the styling:
Apply the outer table styling to the table as normal
Apply the row styling to the top and bottom borders of the th / td cells
Apply the "cell" styling to the divs inside the th & tds.
Working Example:
table {
border: 6px solid lightgray;
border-right-color: gray;
border-bottom-color: gray;
border-collapse: collapse;
}
td {
border-top: 5px solid gray;
}
tr:not(:last-child) td{
border-bottom: 5px solid gray;
}
th .cell,
td .cell {
margin: 5px;
padding: 5px;
border: 2px ridge lightblue;
}
<table>
<tr>
<th><div class="cell">First Name</div></th>
<th><div class="cell">Last Name</div></th>
</tr>
<tr>
<td><div class="cell">John</div></td>
<td><div class="cell">Smith</div></td>
</tr>
<tr>
<td><div class="cell">Jane</div></td>
<td><div class="cell">Doe</div></td>
</tr>
</table>
Found a way by just adding an hr and a minuscule tr between both trs.
hr {
border: 4px outset rgb(207, 172, 179);
width: 443px;
position: absolute;
top: 388px;
left: 35px;
}
tr#mini {
border: none;
padding: 0px;
margin: 0px;margin-top: 0px;
margin-bottom: 0px;
height: 8px;
}
HTML:
<table id="tableau" class="nomaltext">
<tr>
<th>
25g
</th>
<th>
50g
</th>
<th>
75g
</th>
<th>
100g
</th>
<th>
Personnalisé (min. 120g)
</th>
</tr>
<tr id="mini">
<hr>
</tr>
<tr>
<td>
5,99$
</td>
<td>
8,99$
</td>
<td>
13,80$
</td>
<td>
7,40$
</td>
<td>
11¢/gramme
</td>
</tr>
</table>
I have a table inside another table. My HTML code is like below.
<td>
<table>
<tbody>
<tr>
<td class="remind_when"><label>sfd</label></td>
<td class="remind_when"><label>sdfasdf</label></td>
<td class="remind_when"><label>sadfasf</label></td>
</tr>
</tbody>
</table>
</td>
My CSS code is like below
.remind_when{
border-radius: 5px;
border: 2px solid #ced4da !important;
display: inline-block;
}
table, th, td {
border-collapse: collapse;
}
I am getting output like below
Only elements that display as table-* will collapse their borders. You have made the td elements display: inline-block so they won't.
So don't do that.
I want to add border to my specific table's td and th so i did like :
table.borderedtable td, th {
border: 1px solid black;
}
table.borderedtable {
border-collapse: collapse;
}
<table class='borderedtable'>
<tr>
<td>
<table>
<tr>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
problem is the inside table also gets the border I want the border to be added only to td and th under the table with class. So i tried using direct child select > like below:
table.borderedtable>tr>td,>tr>th {
border: 1px solid black;
}
table.borderedtable {
border-collapse: collapse;
}
<table class='borderedtable'>
<tr>
<td>
<table>
<tr>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
Now I dont get any border
The browser automatically inserts a <tbody> element inside tables, so the tbody is the direct descendent of your table, not tr.
For instance, to select the first td inside a table you would do this:
table.borderedtable>tbody>tr>td {
border: 1px solid black;
}
table.borderedtable>tbody>tr>td, table.borderedtable>thead>tr>th {
border: 1px solid black;
}
table.borderedtable {
border-collapse: collapse;
}
I want to have some TDs in a table without border. Here is what I've tried:
CSS
.calendar-noBorder {
border: none;
background-color: red;
}
.calendar-table {
border-collapse: collapse;
}
.calendar-table td {
border: 1px solid black;
}
HTML
<table class="calendar-table">
<tr>
<td class="calendar-noBorder"> </td>
<td> 1 </td>
<td> 2 </td>
<td> 3 </td>
</tr>
<tr>
<td class="calendar-noBorder"> </td>
<td> a </td>
<td> b </td>
<td> c </td>
</tr>
<tr>
<td> aaaaaa</td>
<td> b </td>
<td> c </td>
<td> d </td>
</tr>
</table>
JsFiddle
I want the TDs with noBorderTD class to have no border and the others to have borders. I'd like to avoid to specify a class using "class=" on every bordered TDs.
What's the best way to do it clean ?
Your order of applying styles was wrong. The correct order is:
.calendar-table td {
border: 1px solid black;
}
td.calendar-noBorder {
border: none;
background-color: red;
}
.calendar-table {
border-collapse: collapse;
}
Explanation: First specify the borders for all the td, then remove the specific td borders which are not needed.
See the fiddle: "https://jsfiddle.net/bwudg7fn/1/"
instead of:
border:none;
Use -
border:0;
on the TD classes
Try
.calendar-noBorder {
border: none!important;
background-color: red;
}
https://jsfiddle.net/bwudg7fn/2/
I am making a form in html, and I am using a table for layout of my input controls and labels.
For each input of a form, there is one label associated with it.
I want a border to appear around each pair of adjacent cell that is a label and its associated input tag.
I tried making a div around the two adjacent <td> tags but it says "invalid tag" as only <td> are allowed inside a <tr> tag.
Is there anyway to do it either in CSS or anything else ?
My HTML sample code :
<table>
<tr>
<td>Date</td>
<td><input type="text"></td>
<td>Name</td>
<td><input type="text"></td>
</tr>
</table>
Below is a screenshot of what I want to achieve.
You've not collapsed your table border, try this
Demo
table {
border-collapse: collapse;
}
table, td {
border: 1px solid #c00000;
}
If you could apply classes to your td's you could try this:
<table cellspacing="0">
<tr>
<td class="label">Label1: </td>
<td>input1</td>
<td class="label">Label2: </td>
<td>input2</td>
</tr>
</table>
With the following css:
table {
background-color: silver;
border-collapse: collapse;
}
td {
padding: 5px;
border: 1px solid red;
border-width: 1px 1px 1px 0px;
}
td.label {
border-width: 1px 0px 1px 1px;
}
http://jsfiddle.net/H3p8e/2/
Try to apply border-collapse:collapse; rule.