I am trying to create a table that has rounded top borders on either side, but the rest of the table's borders are squared.
When I apply this CSS the border remain squared, but the background-color does get rounded off, which creates a weird look:
table {border-collapse:collapse}
th {border-top:1px solid red; width:70px}
th, td {text-align:left; background-color:#cccccc}
th.header1 {border-top:1px solid red; border-left:1px solid red; border-top-left-radius:20px}
th.header2 {border-top:1px solid red; border-right:1px solid red; border-top-right-radius:20px}
The result is this:
How do I 'round' the borders in the top left/right header cells please so that the red border follows the background?
Please see the JSFiddle for a working example.
This is because border collapsed with:
CSS
table {
border-collapse: collapse;
}
Look at quick fix.
change:
table {
border-collapse: collapse;
}
to:
table {
border-collapse: separate;
border-spacing: 0px 0px;
}
DEMO
It can be solved rather simply by assigning the border properties only to the table tag instead of assigning them to the th tag and td tag.
table {
background: #ccc;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-top: 1px solid red;
}
th {
width: 70px;
}
th, td {
text-align: left;
}
http://jsfiddle.net/Tomer123/z5832/9/
Use the code in this way:
table {border:collapse;}
th {border-top:1px solid red; width:70px}
th, td {text-align:left; background-color:#cccccc}
th.header1 {border-top:1px solid red; border-left:1px solid red; border-top-left-radius:20px}
Related
I want to use a bootstrap 3 table with borders, eg using class="table table-bordered", so that I'll have borders between cells, but I don't want any borders on the outsides of the table.
I tried the following, and it seems to work well for the sides, but I can't think of a nice way to handle the potential top and bottom borders considering that thead and tfoot are optional elements. I was hoping to make something robust that would account for these scenarios, maximizing resuse potential.
.table-bordered.no-outside-borders {
border: none;
}
.table-bordered.no-outside-borders>thead>tr>td:first-child,
.table-bordered.no-outside-borders>thead>tr>th:first-child,
.table-bordered.no-outside-borders>tfoot>tr>td:first-child,
.table-bordered.no-outside-borders>tfoot>tr>td:first-child,
.table-bordered.no-outside-borders>tbody>tr>td:first-child,
.table-bordered.no-outside-borders>tbody>tr>th:first-child {
border-left: none;
}
.table-bordered.no-outside-borders>thead>tr>td:last-child,
.table-bordered.no-outside-borders>thead>tr>th:last-child,
.table-bordered.no-outside-borders>tfoot>tr>td:last-child,
.table-bordered.no-outside-borders>tfoot>tr>th:last-child,
.table-bordered.no-outside-borders>tbody>tr>td:last-child,
.table-bordered.no-outside-borders>tbody>tr>th:last-child {
border-right: none;
}
Is there a nice css solution here?
I had the same problem yesterday, the css code I used for this was:
.table-borderless tbody tr td, .table-borderless tbody tr th, .table-borderless thead tr th {
border: none;
max-height: 200px;
font-size: 20px;
border-right: 1px solid gray;
border-collapse: collapse;
}
.table.table-borderless {
border-right: 1px solid gray;
border-collapse: collapse;
max-height: 200px;
font-size: 20px;
}
I'm trying to get the table in html fully copied from browser (works in Chrome) to Word document. What happens is that last row's border doesn't get passed in Word.
Take the code:
HTML:
<table id="t6">
<tr><th></th><th>raw_alpha</th><th>std.alpha</th><th>G6(smc)</th><th>average_r</th></tr>
<tr><td>gse1</td><td>0.88</td><td>0.88</td><td>0.88</td><td>0.45</td></tr>
<tr><td>gse10</td><td>0.88</td><td>0.88</td><td>0.88</td><td>0.45</td></tr>
</table>
CSS:
table, th, tr, td {
background-color:white;
border-spacing: 0;
padding: 2px 6px;
border-collapse:collapse;
text-align: right;
}
th {
background-color: white;
color: black;
border-width:1px;
border-color: #000;
border-style: solid none solid none;
}
tr:last-child {
border: 1px solid #000;
border-style: none none solid none;
}
Is there any way to make the last row's border be included? Also is there a possibility for this to work in Firefox?
Borders applied to tr elements are apparently not recognized, so you need to apply them to td instead.
In your CSS, change tr:last-child to tr:last-child td and it should work.
This is the jsfiddle
http://jsfiddle.net/r323e/
it is very simple:
I want to put a border on the table tr so I tried this:
.table tr{
height: 30px;
border-bottom: 10px solid #000000;
}
The height property is applied but the border is not.
why please? and how to fix it.
Many thanks
Add display:block to your tr style.
.table tr{
display:block;
height: 30px;
border-bottom: 10px solid #000000;
}
you can define a tr class css like this
<tr class="border_bottom">
and in your css you can do this
tr.border_bottom td {
border-bottom:1pt solid black;
}
tried in your code and works..good luck!!
Here is what I have in CSS:
table.defaultTable
{
border-style: Solid;
border-width: thin;
text-align: center;
border: 1px;
}
This is what it the table looks like:
As you can see, the cells inside the table do not have a solid border around them.
table.defaultTable td
{
border: 1px solid black;
}
This will put a border around each cell in your defaultTable. However, there will be space between them. To remove that space, you also need the following:
table.defaultTable { border-collapse: collapse; }
http://jsfiddle.net/YH46T/1/
Try to use rule
table td{
border: 1px solid black;
}
Of course you can use class or id selectors on table for separation of rule influence. But main idea is set border to the table's cells, not the header, because for header you should use th elements.
If you want to add a border simply add the line border: 1px solid #000; to your css.
td{
border: 1px solid #000;
}
I would acheive this by using adjacent selectors, like so:
table {
border: 1px solid #000;
}
tr {
border-top: 1px solid #000;
}
tr + tr {
border-top: 1px solid red;
}
td {
border-left: 1px solid #000;
}
td + td {
border-left: 1px solid red;
}
You could try it with
border-collapse: separate;
See here: http://www.w3schools.com/cssref/pr_border-collapse.asp
Another way could be to define a class "cell-border" (or similar) and give that class a border property.
You need to set the border property on cells. Setting it on the table element sets only a border on the table as a whole. A minimal rule would be
th, td { border: solid }
In general, a table can have two kinds of cells, headers cells th and data cells td. In a table that presents tabular data, rather than acts as a layout tool only, there is usually a row of header cells that specify column headers.
is there any way to apply to a table cells' both the separate and the collapsed border properties to have collapsed but separated? Thanks
EDIT: this is the wanted result:
Perhaps
table {
border-spacing: 1px 0;
}
The closest I can get is:
table {
border-collapse: separate;
border-spacing: 4px 0;
}
table td, table th {
border: 1px solid black;
}
Unfortunately, this will create a double-thick line between the rows. Negative values are not allowed in the border-spacing property, otherwise -1px would probably work.
You could make the other lines 2px wide if that is acceptable, then at least you wouldn't have differing border thicknesses:
table {
border-collapse: separate;
border-spacing: 4px 0;
}
table td, table th {
border-width: 1px 2px;
border-style: solid;
border-color: black;
}
table tr:first-child th,
table tr:first-child td {
border-top-width: 2px;
}
table tr:last-child th,
table tr:last-child td {
border-bottom-width: 2px;
}
This can be achieved without using extra div elements in the th & td cells. This solution works in Chrome, Firefox and IE8+.
CSS
table
{
border-collapse: separate;
border-spacing: 10px 0px;
}
td, th
{
padding: 10px;
border: 1px solid #000;
border-top: none;
}
table tr:first-child th
{
border-top: 1px solid #000;
}
Change table tr:first-child th to table tr:first-child td if the table's first row doesn't contain table header cells (TH).
See my jsfiddle here: Table with column spacing but collapsed row border
No, the border-collapse does not allow for separate defining of the horizontal and vertical. You can achieve it with extra markup (which, on a table, could end up being a lot of extra markup), so I don't advise it, but I will give the code for it:
Html:
<table>
<tr>
<th><div>Header 1</div></th>
<th><div>Header 2</div></th>
</tr>
<tr>
<td><div>Content 1</div></td>
<td><div>Content 2</div></td>
</tr>
<tr>
<td><div>Content 3</div></td>
<td><div>Content 4</div></td>
</tr>
</table>
And css:
table {border-collapse: collapse;}
th, td { border: 0; padding: 0;}
th div, td div {margin: 5px 0 0; border: 1px solid #ff0000; padding: 5px;}
Of course, you may want to use a class on the div or a child selector, some way of only targeting the div if you might have other div's in the table data. The margin controls your horizontal gap, and of course, your padding or border width can be whatever you want.
Is this what you're looking for?
table {
border: 1px solid black;
}
table td {
border: 1px solid red;
margin: 3px;
}
It doesn't use the border-collapse property, but it creates an outer table border with each <td> in its own separate border.