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!!
Related
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.
I had create table with help of bootstrap css. I want to remove padding of cell and bordercolor black to whole table only with bootstrap css. I don't want to create my own css.Only from boot strap classes I want to remove padding and provide border color black to whole table.
Thanx in advance.
plz help me.....
You can overwrite the class rule by adding !important attribute to desired property
like
.table{padding:0 !important}
.table-bordered td {
border: 1px solid #ddd !important;
}
.table tfoot > tr > td {
padding: 8px;
line-height: 1.428571429;
vertical-align: top;
border-top: 1px solid #dddddd;
}
.table thead > tr > th {
vertical-align: bottom;
border-bottom: 2px solid #dddddd;
}
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}
How to create a table with no outer border but inner borders only. Something like this one (See bottom right in the page). I know that I can create it manually like they did, I mean to give a class to each td but isn't out there a better way to realize this?
No they didn't do it that way, it's done in a nice way! :)
This removes the right border from the cells:
.sidebar-stats td:last-child, .sidebar-stats th:last-child {
border-right: 0 none;
}
(In the same way you can remove the bottom-border for the last row. You can use Firebug to analyse their CSS, helps a lot!)
Here's a solution that'll work in all browsers, but requires you to add a CSS class to the furthest right and bottom <td>'s in your table (vs having to give a class to each <td>)
<table>
<tr><td class="inner">text</td><td class="inner right">text</td></tr>
<tr><td class="inner bottom">text</td><td class="inner bottom right">text</td></tr>
</table>
.inner {
border-bottom: 1px solid #CCC;
border-right: 1px solid #CCC;
}
.right {
border-right: 0;
}
JSFiddle: http://jsfiddle.net/HS4nQ/3/
You can style the td elements to have borders, and then giver your table border:0, an make sure to add border-collapse:collapse to the table as well. It should look like this in the end:
table {
border:0;
border-collapse:collapse;
}
td {
border:1px gray solid;
border-collapse:collapse;
}
This is the :first-child variation:
http://jsfiddle.net/6Z7R9/
table.mytable > * > tr > th,
table.mytable > * > tr > td {
border-left: 10px solid red;
border-top: 10px solid red;
}
table.mytable > * > tr > th,
table.mytable > * > tr > td:first-child {
border-left: none;
}
table.mytable > *:first-child > tr:first-child > th,
table.mytable > *:first-child > tr:first-child > td {
border-top: none;
}
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.