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;
}
Related
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;
}
I have Googled and read a few articles on SO. Unfortunately explicitly setting borders on nested tables is not an option - I am positive I have done this before using border-collapse: collapse
Maybe I imagined the whole thing. I have the following CSS:
.table-grid {
width: 100%;
}
.table-grid > thead > tr > th,
.table-grid > tbody > tr > th,
.table-grid > tfoot > tr > th,
.table-grid > thead > tr > td,
.table-grid > tbody > tr > td,
.table-grid > tfoot > tr > td {
border: 1px solid red;
border-collapse: collapse;
}
Red borders still doubling up, tripling up, etc...what am I missing? Or misunderstanding?
This is for the UI of rather complicated scheduling tool for CNC machines - so DIV's are not required - I need it done using tables.
Anyway ideas?
EDIT | Markup below
<table class="table-grid" style="background-color: #fff">
<tr>
<th>Month
<table class="table-grid">
<th>Jan</th>
<th>Feb</th>
<th>Mar</th>
<th>Apr</th>
</table>
</th>
</tr>
This is somewhat trivialized - otherwise id' just keep the the Month as a colspan"7" - the actual scope is far more complicated - so colspan techniques won't suffice
border-collapse: collapse; must be applied to the table for it to take effect, rather than the table cells. However, border-collapse only works on table cells (<td> or <th>) that share a common parent <table>. This means that you cannot merge cells of nested tables, nor can you merge elements that aren't <td> or <th> elements.
In your example this becomes a bit tricky being that all tables, including the nested ones, share the same single class.
With a little creative CSS, we can hide the bottom and left borders from all our nested cells. Additionally, we'll have to remove the right border of the last cell in a row.
Using a combination of the nested selector .table-grid .table-grid, as well as :last-child for altering the final cell of a nested row, you can come up with an infinitely "nestable" example that looks something like this:
.table-grid {
width: 100%;
border-collapse: collapse;
}
.table-grid>tbody>tr>th {
padding: 0;
}
.table-grid>thead>tr>th,
.table-grid>tbody>tr>th,
.table-grid>tfoot>tr>th,
.table-grid>thead>tr>td,
.table-grid>tbody>tr>td,
.table-grid>tfoot>tr>td {
border: 1px solid red;
}
.table-grid .table-grid td,
.table-grid .table-grid th {
border-top: 1px solid red;
border-right: 1px solid red;
border-bottom: 0;
border-left: 0;
}
.table-grid .table-grid td:last-child,
.table-grid .table-grid th:last-child {
border-right: 0;
}
<table class="table-grid" style="background-color: #fff">
<tr>
<th>Month
<table class="table-grid">
<tr>
<th>Jan</th>
<th>Feb</th>
<th>Mar</th>
<th>Apr</th>
</tr>
</table>
</th>
</tr>
</table>
what you also can do is add this styling to the child table
width: calc(100% + 2px);
border-collapse: collapse;
border: none;
margin-left: -1px;
I have an issue. I have a table made with pure HTML code, here is it:
<table id="calendarTable">
<tr>
<th id="tableHeader" colspan=7></th>
</tr>
<tr>
<th>Dom</th>
<th>Seg</th>
<th>Ter</th>
<th>Qua</th>
<th>Qui</th>
<th>Sex</th>
<th>Sáb</th>
</tr>
<tbody id="tableBody"></tbody>
<tr>
<td colspan=7>
<p>
<form id="dateChooser" name="dateChooser">
<select name="chooseMonth" onChange="populateTable(this.form)">
<option selected>Janeiro
<option>Fevereiro
<option>Março
<option>Abril
<option>Maio
<option>Junho
<option>Julho
<option>Agosto
<option>Setembro
<option>Outubro
<option>Novembro
<option>Dezembro
</select>
<select name="chooseYear" onChange="populateTable(this.form)">
</select>
</form>
</p>
</td>
</tr>
</table>
Here is my CSS:
#calendarTable {
text-align: center;
width: 80%;
height: 100%;
color: #18B6E6;
border-color: #18B6E6;
border: solid 1px;
border-radius: 20px;
}
#calendarTable td {
border: solid 1px;
border-radius: 4px;
}
#calendarTable th {
border: solid 1px;
font-weight: 700;
}
I want to round the borders using only CSS, I just tried using the border-radius property but my table is not changing borders.
Anyone have a tip for me?
Thanks in advance!
Here's a simplified table with border radius applied. The trick is to set the left border of the cell rather than the table itself. It'll work with or without a thead and I've annotated the css to show what I'm doing.
/*
* First normalise some of the attributes
*/
table td,
table th {
padding: .5rem;
text-align: left;
vertical-align: top;
}
/*
* Add the border, set border spacing etc
* The left width is 0 so cell border can be applied without doubling up.
*/
.table-bordered {
border: 1px solid silver;
border-left-width: 0;
border-collapse: separate;
border-spacing: 0;
border-radius: 1rem;
}
/*
* Add the border to table cell/header
*/
.table-bordered td,
.table-bordered th {
border-top: 1px solid silver;
border-left: 1px solid silver;
}
/*
* Remove the top border from the first header/cell
*/
.table-bordered tbody:first-child tr:first-child td,
.table-bordered thead:first-child tr:first-child th {
border-top-width: 0;
}
/*
* Set the border radius for the first header/cell
*/
.table-bordered thead:first-child tr:first-child td:first-child,
.table-bordered thead:first-child tr:first-child th:first-child {
border-top-left-radius: 1rem;
}
/*
* Set the border radius for the last header/cell
*/
.table-bordered tbody:last-child tr:last-child td:first-child,
.table-bordered tbody:last-child tr:last-child th:first-child {
border-bottom-left-radius: 1rem;
}
<table class="table-bordered">
<thead>
<tr>
<th scope="col">Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Data</th>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<th scope="row">Data</th>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<th scope="row">Data</th>
<td>Data</td>
<td>Data</td>
</tr>
</tbody>
</table>
As others have said, this is the code that should give the look you want.
Code
#RoundedTable {
border: 1px solid black;
border-radius: 10px;
}
#RoundedTable td, #RoundedTable th {
border: 1px solid gray;
border-radius: 10px;
padding: 3px;
}
<table id="RoundedTable">
<tr><th>Table header</th><th>Another header cell</th></tr>
<tr><td>Table cell...</td><td>More data...</td></tr>
<tr><td>Table cell...</td><td>More data...</td></tr>
<tr><td>Table cell...</td><td>More data...</td></tr>
<tr><td>Table cell...</td><td>More data...</td></tr>
</table>
Caveat
For this to work, though, you need to make sure that border-collapse is set to separate instead of collapse for your table. Otherwise, neither the radius for the cells nor the radius for the whole table will work.
So look through the other CSS that may be affecting your table. If you find border-collapse: collapse; anywhere, that's the problem.
#calendarTable{
border-radius:20px;
}
DEMO
Remove the border attribute on the table. It is still supported in browsers, but it is removed from HTML5 specification. The effect that attribute makes is probably not what you want anyways.
If you want border around each cell in your table just specify that in CSS and include border-radius there as well.
I.e.
#calendarTable td { border: solid 1px; border-radius: 4px; }
If you just want border around the whole table, use the same css on table selector:
#calendarTable { border: solid 1px; border-radius: 4px; }
border-radius seems to work both on table and td elements, with or without the border attribute on table.
You must have some other CSS rules coming into play.
table {
border: 1px solid blue;
border-radius: 10px;
}
table td, table th {
border: 1px solid gray;
border-radius: 10px;
padding: 5px;
}
<table border=1>
<tr>
<th>Table header...</th>
</tr>
<tr>
<td>Table cell...</td>
</tr>
<tr>
<td>Table cell...</td>
</tr>
<tr>
<td>Table cell...</td>
</tr>
<tr>
<td>Table cell...</td>
</tr>
</table>
I have a simple table with several rows. The top rows contains headings, while the rows under it have the id attribute of data. I have been trying to set CSS for the table rows that only have the id attribute data, but have so far only been able to set it for the entire table.
<table width = "80%" align="center" id="example">
<tr>
<td><h3>ID</h3></td>
<td><h3>First Name</h3></td>
<td><h3>Last Name</h3></td>
</tr>
<tr id="data">
<td>1</td>
<td>Joe</td>
<td>Schmoe## Heading ##</h3><td>
</tr>
</table>
and the CSS. I tried changing #example tr to tr #data with no luck. I know that I am overlooking something simple, but I am unsure what.
table#example {
border-collapse: collapse;
}
tr #data{
background-color: #eee;
border-top: 1px solid #fff;
}
tr #data:hover {
background-color: #ccc;
}
tr #data {
background-color: #fff;
}
tr #data th, tr #data td {
padding: 3px 5px;
}
tr #data td:hover {
cursor: pointer;
}
I'm not using classes because I'm not familiar enough with CSS and being able to use id only once is not a limitation for what I need.
You could use a class, but better yet, don't use classes at all (HTML markup is your friend)! Here's a clean solution to your problem:
HTML
<table>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
<tr>
<td>1</td>
<td>Joe</td>
<td>Schmoe</td>
</tr>
</table>
CSS
th {
font-weight: bold;
/* More styles here */
}
td {
background: #EEE;
border-top: 1px solid #FFF;
}
tr:hover td {
cursor: pointer;
background: #CCC;
}
/* Styles upon styles */
Simply use the th element to specify the table header. To get each table data row to highlight as you mouse over it, simply use the tr:hover td rule to catch that case. See this fiddle for a working example.
Click the link http://jsfiddle.net/anglimass/njAFp/
I want border left and right some space:
Now:
Want:
Please watch the "want image" left and right side. I struck 'table-row' padding(left and right). Anybody know how to do this?
I don't think you can do it on TR level. How about TD level:
table tbody tr td {
border-top: 1px solid red;
border-bottom: 1px solid red;
}
table tr td:first-child {
padding-left: 20px;
border-left: 10px solid red;
}
table tr td:last-child,
td.last-td {
padding-left: 20px;
border-right: 10px solid red;
}
This would be important in terms of x-browser compatibility as well.
EDIT: you can drop the above into your fiddle and look at it in ie7, add 'hacky' 'last-td' selector to your last TD (ie7 does not support 'last-child', but does support 'first-child')
It's kind of hacky, but it produces the effect you are looking for:
http://jsfiddle.net/njAFp/3/
<table cellspacing="0" cellpadding="0">
<thead>
<tr>
<th></th>
<th>lai</th>
<th>pola</th>
<th>vaala</th>
<th>elah</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td class="blank"></td>
<td>ennala</td>
<td>yamla</td>
<td>varamattala</td>
<td>vettiruven</td>
<td class="blank"></td>
</tr>
</tbody>
</table>
table{width:400px; height:auto; background:silver;border-collapse:collapse;}
table thead{}
table tbody{}
table tr{ background:silver;}
table tr th{ padding:5px; background:silver;}
table tr td{ border-bottom:1px solid red; border-top:1px solid red; padding:5px; background:#eee;}
td.blank { width:20px; border:0; }