I'm hardly an expert in css, so this is a bit frustrating. I have a grid that was filled with a repeater. I want each row to have a 1px border along the bottom to visually separate the rows. I also want a dark gray border on each side of the table. With the following CSS for this table:
#repeaterTable
{
border-left: 1px solid #A3A3A3;
border-right: 1px solid #A3A3A3;
border-collapse: collapse;
}
repeaterTable.td
{
border-bottom: 1px solid white;
}
I am getting this result in FF (SS of right edge of table):
And this in IE8:
alt text http://img412.imageshack.us/img412/7092/borderie.png
What I need is to have the dark gray border remain solid, instead of break for each row border. The table has two columns in it, but the cellspacing is at 0px so setting the border-bottom on the tr makes a continuous border. Can anyone suggest some changes to the css to get this working?
Try this to get the effect you want:
#repeaterTable
{
border-left: 1px solid #A3A3A3;
border-right: 1px solid #A3A3A3;
border-collapse:collapse;
border-spacing:0px;
background-color:#ccc;
}
#repeaterTable td:first-child
{
border-left: 1px solid #A3A3A3;
}
#repeaterTable td:last-child
{
border-right: 1px solid #A3A3A3;
}
#repeaterTable td
{
border-bottom: 1px solid white;
}
Tested with the following markup in IE8 and FF (doesn't work in Chrome/Safari :( ).
<table id="repeaterTable">
<tr> <td> </td><td> </td> </tr>
<tr> <td> </td><td> </td> </tr>
<tr> <td> </td><td> </td> </tr>
<tr> <td> </td><td> </td> </tr>
</table>
Using this CSS will get it looking like you want it to in IE/Safari/FF/Chrome. The problem is the border-collapse, it is what is causing the continuation of the white border into the table border. If you remove that (and add back in cellpadding="0" and cellspacing="0") and go with this CSS:
#repeaterTable
{
border-left: 1px solid #A3A3A3;
border-right: 1px solid #A3A3A3;
background: #CCC;
}
#repeaterTable td
{
border-bottom: 1px solid white;
}
#repeaterTable td.last
{
border-bottom: 0px;
}
With this HTML:
<table id="repeaterTable" cellpadding="0" cellspacing="0">
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td class="last"> </td></tr>
</table>
It'll work.
You can use :last-child in the CSS but that isn't supported by older browsers (IE7/etc) so it'll look wrong there. Depends on how compatible you want to be. So instead I used a "last" class.
Alternately you could just wrap the table in a DIV that has the left and right border and then you only have to worry about the row borders and you can use collapse.
Related
I'm using border-right to add some padding to my header cell. (The reason I'm using border-right instead of padding is because there's actually an image on the background which I want to move).
table {
border: solid 2px red;
}
th {
background-color: #ccc;
border-right: 25px solid transparent;
border-bottom: 1px solid black;
}
th:after {
content: "x";
color: red;
}
td:before {
content: "cell"
}
<table>
<thead>
<tr>
<th> foo</th>
<th> bar </th>
<th> bizz</th>
<tr>
</thead>
<tr>
<td/><td/><td/>
</tr>
</table>
You can see there's a funny interaction between the border-bottom and the border-right. Is there a way to fix this?
This is happening because the bottom border is trying to connect with right border, and the bottom of the right border is not really still the bottom border. Perhaps you can use padding combined with the appropriate background-clip property instead.
When I add the width to the td it makes the th bigger.
If the last column has a lot of text but I don't want the width to show in the whole page, how do I control it?
I would still want to have the th be nowrap and the 'Replacement' and 'Additional test' will always be yes/no text.
I made a https://jsfiddle.net/6Lmt5vjc/
table.standardtable {
border: 1px solid #ddd;
}
table.standardtable th,
table.standardtable td {
padding: 5px 9px;
border-bottom: 1px solid #ddd;
border-left: 1px solid #ddd;
text-align: left;
color: #000;
}
table.standardtable th{
background-color: #f3f3f3;
font-weight: bold;
}
table.standardtable th.section1{
background-color: #04659D;
color: #fff;
border-bottom: 1px solid #044971;
}
Use css selectors to find the last <td> and apply a max-width to it:
table.standardtable tr td:last-child{ /* last-child returns the last instance of the td */
max-width:150px;
/* additional styles as required */
}
Fiddle demo
One thing to note on your fiddle, don't use <td> and <th> mixed. <th> is a table header, where as <td> is a regular cell. Although technically your markup works it is not good practice.
Valid table would be something like:
<table>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
If you want to alter the markup, use css classes instead.
I want to define the colour of the left border of a cell within a table, normally the code would look like:
border-left: solid 10px red;
However this border is created to the left of the TD, so the Header cells are now not level, probably because these header cells do not have the same left border.
Is there is way to set a left border within the TD, something like setting the colour of a padding-left or margin-left, so that the borders remain aligned.
Thanks,
EDIT
<table>
<tr>
<th style="border-left:solid 10px transparent">Col1 heading</th>
<th></th>
</tr>
<tr>
<td style="border-left:solid 10px red">Col1 value<td/>
<td>Col2</td>
</tr>
</table>
The above
Header cell CSS:
border-left: solid 10px transparent;
Try:
border-top: solid 10px transparent;
border-right: solid 10px transparent;
border-bottom: solid 10px transparent;
border-left: solid 10px red;
I have a table sitting inside a div with a colored background. I'm using the border-style:inset for the whole table. Each row of the table needs to have a bottom border, which I have also accomplished. However, those bottom borders extend the full width of the table. I'd like to have some white space on the left and right, as if the table had wide white borders on the left and right.
How can I accomplish this and preserve the inset at the same time? The only thing I can think to do is nest everything inside an outer, one-cell table with the inset. Is there a more elegant way?
FWIW, here's my current code:
CSS
.table {
width: 274px;
height: 300px;
border-collapse: collapse;
background-color: #ffffff;
border-color: #999999;
border-style: inset;
}
.table td {
margin: 6px 0px 6px 10px;
padding: 6px 0px 6px 10px;
border-bottom:thin;
border-bottom-color: #999999;
border-bottom-style: solid;
}
HTML
<div id="item" class="color1">
<h3>TITLE</h3>
<table class="table">
<tr>
<td>TEXT R1<C1/td>
<td>TEXT R1 C2</td>
</tr>
<tr>
<td>TEXT R2 C1</td>
<td>TEXT RC C2</td>
</tr>
</table>
</div>
you could put
margin-right margin-left
of the table or
padding-left padding-right
depending how you want to see this blank space.
I want to use CSS to set a color of the outer border of the table ...
Then the inner cells would have different border color ...
I created something like this :
table {
border-collapse:collapse;
border: 1px solid black;
}
table td {
border: 1px solid red;
}
Problem is, the table's color change and become red as you can see here : http://jsfiddle.net/JaF5h/
If the border width of the table is increased to be 2px it will work : http://jsfiddle.net/rYCrp/
I've been dealing with CSS and cross browsers issues for so long ... This is the first time I face something like that and I am totally stuck ... No idea what to do!
Any one knows how to get that fixed with border-width:1px ?
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;
}
It's a little bit repetitive, but it acheives the effect you're after by setting the top and left borders of the first row and column respectively, then overwriting the 'internal' rows and cells with red.
This won't of course work in IE6 as it doesn't understand the adjacent selectors.
http://jsfiddle.net/JaF5h/36/
Try this:
tbody { display:block; margin: -1px; }
The previous answers didn't fully resolve this for me. The accepted answer allows the internal borders to overlap the outer table border. After some experimentation I came up with the following solution.
By setting the table collapse style to separate the internal borders do not overlap the outer. From there the extra and doubled borders are eliminated.
HTML:
<table>
<tr>
<td>Content</td>
<td>Content</td>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
<td>Content</td>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
<td>Content</td>
<td>Content</td>
</tr>
CSS
table {
border: 1px solid black;
border-collapse: separate;
border-spacing: 0;
}
table td, table th {
border: 1px solid red;
}
table tr td {
border-right: 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{
border-top: 0;
}
https://jsfiddle.net/o5ar81xg/
Create a div surrounding your table. Set the div border color for the outside of your table. DO NOT border-collapse your table. Instead, let your cells separate to show the (inner borders) background color of the div beneath. Then set the background cells to the background color of your choice.
HTML:
<div id="tableDiv">
<table id="studentInformationTable">
<!-- Add your rows, headers, and cells here -->
</table>
</div>
CSS:
#tableDiv {
margin-left: 40px;
margin-right: 40px;
border: 2px solid brown;
background-color: white;
}
table {
position: relative;
width: 100%;
margin-left: auto;
margin-right: auto;
border-color: brown;
}
td, th {
background-color: #e7e1d3;
padding: 10px 25px 10px 25px;
margin: 0px;
}
Try the following it worked for me:
table {
border-collapse: collapse;
border: solid #000;
}
table td {
border: 1px solid red;
}