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.
Related
Moving what was a collection of divs into a table for better column control.
My CSS class associated with the "row" doesn't seem to be carrying the border and webkit properties over when refactored into a table. W3C verified my thought that borders on tables should work (http://www.w3schools.com/css/css_table.asp)
What am I missing to show the CSS border and webkit properties in the table?
JSFiddles:
div: http://jsfiddle.net/phamousphil/rgt03mu4/
table: http://jsfiddle.net/phamousphil/tca7vfyv/
Code:
CSS
.notification-popup-container {
background-color: #fff;
border: 1px solid black;
-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
overflow: visible;
width: 400px;
z-index: 99;
display: none;
}
HTML Table
<table class="notification-popup-container-main">
<tbody>
<tr class="notification-popup-container">
<td class="notification-type">
<div>TYPE TYPE</div>
</td>
<td class="notification-popup-body">
<div class="notification-popup-title">TITLE</div>
<div class="notification-popup-message">MESSAGE</div>
</td>
</tr>
</tbody>
</table>
You're putting a border around what is now the tr element, and tr elements can't have borders by default. There's a nice explanation here: https://stackoverflow.com/a/18679047/1876899
You can either add border-collapse: collapse; to the table: Fiddle
Or add the border to the tds instead. Fiddle
.notification-popup-container td {
border: 1px solid black;
}
So I am styling a table, and I'd like to make quite a fancy underline for the table headings.
I've though hard and had a look on the internet but couldn't find anything.
This is the table structure:
<table>
<thead>
<tr>
<td>Number</td>
<td>Name</td>
<td>Address</td>
</tr>
</thead>
<tbody></tbody>
</table>
And my current styling:
table {
width: 100%;
}
table thead {
font-weight: bold;
}
table thead td {
margin-right: 5px;
border-collapse: separate;
border-spacing: 10px 5px;
border-bottom: 2px solid #427AA8;
}
table tbody {
font-size: 90%;
}
table tbody tr {
line-height: 2em;
border-bottom: 1px solid #CCC;
}
table tbody td {
padding: 0 5px;
}
Here is a jsfiddle of the code: http://jsfiddle.net/tYA4e/1/
What I am looking for is a break in the border between the columns, but only in the thead.
And an example of what I am trying to achieve: http://i.imgur.com/OHrhJ.jpg
Is there a way to achieve this with some simple CSS?
A border will, necessarily, extend the full width of its element; therefore to extend a border only partially across the width of an element that border must be applied to a child element, sized accordingly.
That said, the only way this is achievable would seem to be with nesting an element within the td (in this case a span), and using the following CSS:
table thead td span {
display: inline-block;
width: 80%;
border-bottom: 2px solid #427AA8;
}
JS Fiddle demo.
As an aside, though, it's worth noting that, for table-headings, the th (table-heading) element might be more appropriate for your use in this case.
On further thought it is, of course, also possible to use styled hr elements, which allows you to give pixel-level control over the hr's width in that it can extend up to, in this example, 10px from the right edge of the parent td):
table thead td hr {
width: 80%;
margin: 0 10px 0 0;
border-bottom: 2px solid #427AA8;
}
JS Fiddle demo.
You could also use th for heading cells -> no more need for seperating the rows into groups with thead and tbody - less markup and less css.
<table>
<tr>
<th>headlinecell</th>
</tr>
<tr>
<td>contentcell</td>
</tr>
</table>
now just style the th and td.
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;
}
table{border:1px solid #000;} doesn't seem to work without the border=1 statement.
In the same way as changing <input width=30> into input{width:400px;}, I would like to use <table> and declare the border in css only. Is that possible?
Update
my mistake was using
table{border-width:1px;}
instead of e.g.
table{border:1px solid #000;}
--which works fine.
Use this CSS:
table {
border-collapse: collapse
}
td {
border: 1px solid #000
}
Live Demo
border-collapse: collapse is important; without it you get doubled borders, like this.
Absolutely - that is the preferred way. You might have to style td as well as tr.
Try this in CSS
table
{
border:1px solid black;
}
then you can use it in HTML
<table>
....
</table>
yes, but if you use table, it will affect ALL tables in your html.
I suggest doing:
<table class="myTable"> and then .myTable { /*css*/ }
Your style should be:
table td { border: 1px solid #000000; }
See a working example here.
If you are using, <th> for headers, with the code below, you will not get borders around our headers:
td { border: 1px solid #000000; }
you will need to also add:
th { border: 1px solid #000000; }
Regards,
I set the border for the table event_calendar tr to be red, it works in everything except IE 6 & 7. What is wrong with my CSS?
table#event_calendar tr {
border:1px solid red;
}
<div class="content-body">
<table id="event_calendar">
<tr class="calendarHeader">
<th><div class="calendarMonthLinks"><<</div></th>
<th colspan="5"><h1>April 2009</h1></th>
<th><div class="calendarMonthLinks"><a class="calendarMonthLinks" href="http://webdev.herkimer.edu/calendar/2009/05/">>></a></div></th>
</tr>
<tr>
<td class="calendarDayHeading">Sunday</td>
<td class="calendarDayHeading">Monday</td>
<td class="calendarDayHeading">Tuesday</td>
<td class="calendarDayHeading">Wednesday</td>
<td class="calendarDayHeading">Thursday</td>
<td class="calendarDayHeading">Friday</td>
<td class="calendarDayHeading">Saturday</td>
</tr>
</table>
</div>
IE does not honor the border property for <tr> tags. However, there are workarounds by putting a top and bottom border around each cell, and using "border-collapse: collapse;" so there's no space between cells. I will refer to this resource here on the exact method, but it will essentially look like this for you (I haven't tested it myself, so I'm not sure if this is exactly right, but I think you can riff on it.)
table#event_calendar {
border-collapse: collapse;
border-right: 1px solid red;
border-left: 1px solid red;
}
table#event_calendar td, table#event_calendar th {
border-top: 1px solid red;
border-bottom: 1px solid red;
}
Your CSS is sensible enough, but IE just doesn't do borders on tr elements. If you use this style you should get the intended result though:
table#event_calendar {
border-top:1px solid red;
border-right:1px solid red;
border-left:1px solid red;
border-collapse:collapse;
}
table#event_calendar td, table#event_calendar th {
border-bottom:1px solid red;
}
Setting the border on the td is the easiest solution. But if you really really want to make the borders on <tr>, you can always set:
tr { display:block; border-bottom:1px dotted #F00; }
By doing this, you loose the common width between the <td>. If you want to make all of them equal on width, set the display for <td> to inline-block and set some width:
td { display:inline-block; width:20%; }
It helps when you want to draw some border on the <td> and on <tr>.
CSS generated content like tr:before{} or tr:after{} can always help as well.
Change your CSS selector to "table#event_calendar tr td" and it should work.