I am trying to figure out how to add border only inside the table. When I do:
table {
border: 0;
}
table td, table th {
border: 1px solid black;
}
The border is around the whole table and also between table cells. What I want to achieve is to have border only inside the table around table cells (without outer border around the table).
Here is markup I'm using for tables (even though I think that is not important):
<table>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
</tr>
<tr>
<td>Cell (1,1)</td>
<td>Cell (1,2)</td>
</tr>
<tr>
<td>Cell (2,1)</td>
<td>Cell (2,2)</td>
</tr>
<tr>
<td>Cell (3,1)</td>
<td>Cell (3,2)</td>
</tr>
</table>
And here are some basic styles I apply to most of my tables:
table {
border-collapse: collapse;
border-spacing: 0;
}
If you are doing what I believe you are trying to do, you'll need something a little more like this:
table {
border-collapse: collapse;
}
table td, table th {
border: 1px solid black;
}
table tr:first-child th {
border-top: 0;
}
table tr:last-child td {
border-bottom: 0;
}
table tr td:first-child,
table tr th:first-child {
border-left: 0;
}
table tr td:last-child,
table tr th:last-child {
border-right: 0;
}
jsFiddle Demo
The problem is that you are setting a 'full border' around all the cells, which make it appear as if you have a border around the entire table.
EDIT: A little more info on those pseudo-classes can be found on quirksmode, and, as to be expected, you are pretty much S.O.L. in terms of IE support.
this works for me:
table {
border-collapse: collapse;
border-style: hidden;
}
table td, table th {
border: 1px solid black;
}
view example ...
tested in FF 3.6 and Chromium 5.0, IE lacks support; from W3C:
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.
Example of a very simple way for you to achieve the desired effect:
<table border="1" frame="void" rules="all">
<tr>
<td>1111</td>
<td>2222</td>
<td>3333</td>
</tr>
<tr>
<td>4444</td>
<td>5555</td>
<td>6666</td>
</tr>
</table>
For ordinary table markup, here's a short solution that works on all devices/browsers on BrowserStack, except IE 7 and below:
table { border-collapse: collapse; }
td + td,
th + th { border-left: 1px solid; }
tr + tr { border-top: 1px solid; }
For IE 7 support, add this:
tr + tr > td,
tr + tr > th { border-top: 1px solid; }
A test case can be seen here: http://codepen.io/dalgard/pen/wmcdE
Due to mantain compatibility with ie7, ie8 I suggest using first-child and not last-child to doing this:
table tr td{border-top:1px solid #ffffff;border-left:1px solid #ffffff;}
table tr td:first-child{border-left:0;}
table tr:first-child td{border-top:0;}
You can learn about CSS 2.1 Pseudo-classes at:
http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx
this should work:
table {
border:0;
}
table td, table th {
border: 1px solid black;
border-collapse: collapse;
}
edit:
i just tried it, no table border. but if i set a table border it is eliminated by the border-collapse.
this is the testfile:
<html>
<head>
<style type="text/css">
table {
border-collapse: collapse;
border-spacing: 0;
}
table {
border: 0;
}
table td, table th {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
</tr>
<tr>
<td>Cell (1,1)</td>
<td>Cell (1,2)</td>
</tr>
<tr>
<td>Cell (2,1)</td>
<td>Cell (2,2)</td>
</tr>
<tr>
<td>Cell (3,1)</td>
<td>Cell (3,2)</td>
</tr>
</table>
</body>
</html>
that will do it all without css
<TABLE BORDER=1 RULES=ALL FRAME=VOID>
code from: HTML CODE TUTORIAL
Works for any combination of tbody/thead/tfoot and td/th
table.inner-border {
border-collapse: collapse;
border-spacing: 0;
}
table.inner-border > thead > tr > th,
table.inner-border > thead > tr > td,
table.inner-border > tbody > tr > th,
table.inner-border > tbody > tr > td,
table.inner-border > tfoot > tr > th,
table.inner-border > tfoot > tr > td {
border-bottom: 1px solid black;
border-right: 1px solid black;
}
table.inner-border > thead > tr > :last-child,
table.inner-border > tbody > tr > :last-child,
table.inner-border > tfoot > tr > :last-child {
border-right: 0;
}
table.inner-border > :last-child > tr:last-child > td,
table.inner-border > :last-child > tr:last-child > th {
border-bottom: 0;
}
<table class="inner-border">
<thead>
<tr>
<th>head1,1</th>
<td>head1,2</td>
<td>head1,3</td>
</tr>
<tr>
<td>head2,1</td>
<td>head2,2</td>
<th>head2,3</th>
</tr>
</thead>
<tr>
<td>1,1</td>
<th>1,2</th>
<td>1,3</td>
</tr>
<tr>
<td>2,1</td>
<td>2,2</td>
<td>2,3</td>
</tr>
<tr>
<td>3,1</td>
<td>3,2</td>
<td>3,3</td>
</tr>
<thead>
<tr>
<th>foot1,1</th>
<td>foot1,2</td>
<td>foot1,3</td>
</tr>
<tr>
<td>foot2,1</td>
<th>foot2,2</th>
<th>foot2,3</th>
</tr>
</thead>
</table>
Add the border to each cell with this:
table > tbody > tr > td { border: 1px solid rgba(255, 255, 255, 0.1); }
Remove the top border from all the cells in the first row:
table > tbody > tr:first-child > td { border-top: 0; }
Remove the left border from the cells in the first column:
table > tbody > tr > td:first-child { border-left: 0; }
Remove the right border from the cells in the last column:
table > tbody > tr > td:last-child { border-right: 0; }
Remove the bottom border from the cells in the last row:
table > tbody > tr:last-child > td { border-bottom: 0; }
http://jsfiddle.net/hzru0ytx/
This should work:
HTML:
<table frame="void" rules="all">
CSS:
td, th {
border: 1px solid red;
}
For some reason, I have tried styling the <tbody> but it doesn't matter how much of the existing styles I pull out, it doesn't make any difference.
Theoretically, the following should work, but doesn't...
tbody {
border: 1px solid #2696A1;
width: 100%;
border-spacing: 0px;
margin-top: 2px;
margin-bottom: 2px;
page-break-inside: avoid;
border-collapse: collapse;
}
<table>
<tbody>
<tr>
<td>Test</td>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
<td>Test</td>
</tr>
</tbody>
</table>
The ultimate goal (unless a better suggestion presents itself) is to wrap the <tbody> with a border around two <tr> so they are visually identifiable as together. The top <tr> is always visible but the second (or more) are not (due to jQuery toggling of the additional information. Normally I would wrap this in a <div> and call it a day but I need the table format from the header of this dynamic table so everything stays in it's appropriate columns and doesn't go drifting off into neverland.
Any ideas or suggestions would be fantastic. :-)
I think the tbody for define boundary as a virtual manner and increase human readability. However instead of styling tbody you can use td tricky way to achieve the goal. Even tr also not a good place to apply styling. You should target td, th etc. Please try following way to apply border:
table {
width: 100%;
border-spacing: 0px;
margin-top: 2px;
margin-bottom: 2px;
page-break-inside: avoid;
border-collapse: collapse;
}
tbody > tr:first-child > td {
border-top: 1px solid #2696A1;
}
tbody > tr > td:first-child {
border-left: 1px solid #2696A1;
}
tbody > tr > td:last-child {
border-right: 1px solid #2696A1;
}
tbody > tr:last-child > td {
border-bottom: 1px solid #2696A1;
}
I'm using multiple tables with different properties. The problem is all of my tables seem to be get their properties from the one class, "spectable". Particularly the border, I don't want borders in any other class. How to I properly assign multiple tables?
HTML
/*I only need a table here to keep it centered in the page, so i want no border*/
<table class="bantable">
<tr>
<td align="middle">
<div id="container">
<!-- Each image is 350px by 233px -->
<div class="photobanner">
<img class="first" src="/banner/AA.JPG" alt="">
<a target="_blank" href="P1010011.JPG">
</div>
</div>
</td>
</tr>
</table>
/*this one i want the border in*/
<table class="spectable">
<tr>
<th>Type</th>
<td>GMC 7000 Dump Truck</td>
<tr>
<th>Stock#</th>
<td>70017</td>
<th>Condition</th>
<td>N/A</td>
</tr>
<tr>
</table>
CSS
table.bantable table, td, th, tr
{
border: none;
}
table.spectable table, td, th
{
border: 3px solid #fdff30;
}
table.spectable th
{
background-color: #fdff30;
color: black;
}
The way you used the td, th, table selector was wrong. Update your CSS like below.
table.bantable, table.bantable td, table.bantable th, table.bantable tr
{
border: none;
}
table.spectable, table.spectable td, table.spectable th
{
border: 3px solid #fdff30;
}
table.spectable th
{
background-color: #fdff30;
color: black;
}
It appears you are using commas in your selectors.
Look at this fiddle for an example of how it was changed: http://jsfiddle.net/6GVRr/
table.bantable td, table.bantable th, table.bantable tr
{
border: none;
}
table.spectable td, table.spectable th
{
border: 3px solid #fdff30;
}
table.spectable th
{
background-color: #fdff30;
color: 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 problem with html and css.
i have a html file with a css file attached and in the css file i have s.th. like:
table { background: #fff; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; margin: 0 0 18px; border: 1px solid #ddd; }
table thead, table tfoot { background: #f5f5f5; }
table thead tr th,
table tfoot tr th,
table tbody tr td,
table tr td,
table tfoot tr td { font-size: 12px; line-height: 18px; text-align: left; }
table thead tr th,
table tfoot tr td { padding: 8px 10px 9px; font-size: 14px; font-weight: bold; color: #222; }
table thead tr th:first-child, table tfoot tr td:first-child { border-left: none; }
table thead tr th:last-child, table tfoot tr td:last-child { border-right: none; }
table tbody tr.even,
table tbody tr.alt { background: #f9f9f9; }
table tbody tr:nth-child(even) { background: #f9f9f9; }
table tbody tr td { color: #333; padding: 9px 10px; vertical-align: top; border: none; }
that is a default theme. its nice for all the tables.
but now i want to add a standart non css formated table in my web project so i write:
<table> ... </table>
this table gets formated with the css. what can i do, to prevent this table getting formated with the css just showing it with the normal default style?
what can i do, to prevent this table getting formated with the css just showing it with the normal default style?
Change the selectors so they don't match the table.
There is no way to exclude an element from CSS rules if they have a selector that matches the element. If you can't prevent that in the first place then your only option is to write more rule-sets that apply different (specific) CSS to the element.
There is no "Reset to browser default" mechanism.
You will need to give each table a separate class and then style them separately.
For example your html could be
<table class="example1>
<tr>
<td>
</td>
</tr>
</table>
<table class="example2>
<tr>
<td>
</td>
</tr>
</table>
and your CSS could be
table.example1
{
YOUR CSS
}
table.example2
{
YOUR CSS
}
Your css is to generic. You might change it to use classes.
For example, ale tables change to
table.styled {your csss here}
And then in code where you want your styled table use:
<table class="styled"> ... </table>
You have to define a class for the tables that you don't want to have the default appearance. Then apply the class to the tables that you want. You have to rewrite the default css rules. If not, the default rules will affect your table.