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.
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.
I want in a table in html a border left.
Here is the table
.weTable td{
border-color:#dcdcdc;
border-width:1px;
border-style:solid;
}
This is for the table cell and this has the table
border-left: 15px solid #548dd4;
My problem is I want a vertical line left and its not a straight line on this way.
Now:
What I want:
try this one?
table {
border-left: 15px solid #548dd4;
border-spacing: 0px;}
The problem is caused by the fact that borders meet at an angle so unless you remove the border from the top you cannot get straight 'joins'.
As an alternative, you could add extra padding-left to the cell and use an inset box-shadow like so.
table {
border-collapse: separate;
border-spacing: 5px;
margin: 1rem;
text-align: center;
}
table td {
width: 50px;
border-color: black;
border-width: 1px;
border-style: solid;
padding: 50px;
padding-left: 65px;
position: relative;
}
table td {
box-shadow: inset 15px 0 0 lightblue;
}
<table class="shadow">
<tr>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
</tr>
</table>
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 within a div (see below). How do I add a right padding of say 30px to each cell/column within the table in that div? My understanding is that I have to use inline CSS? Basically, I want each cell to be padded on the right by 30 pixels.
<div id="ddTopMenu";>
<table border="0" >
<tr>
<td width=100></td><td >Dictionary</td><td>Search</td><td>Sources</td><td>References</td>
</tr>
</table>
</div>
div#ddTopMenu table td {
padding-right: 30px;
}
You just need to select the dom element starting from 'ddTopMenu':
#ddTopMenu table td {
padding: 0px 30px 0px 0px;
}
Do you truly mean padding, which is like a margin within the TDs themselves, or a 30px separation between cells in the same row?
If you want a padding, then set the padding-right to 30px, possibly excepting the TDs in the last column.
If you want a 30px separation between cells in the same row, then you should take a look at border-collapse. Set the left and right border widths of all TDs to 30px, the border color to the background color of #ddTopMenu, and border-collapse to collapse. You can also set the right and left border widths of the rightmost and leftmost cells, respectively, to 0 so that the 30px separation is only between cells:
<!DOCTYPE html>
<html>
<head>
<style>
#ddTopMenu {
display: inline-block;
border: black 1px solid;
background-color: red;
}
#ddTopMenu td {
background-color: white;
border-left: red 30px solid;
border-right: red 30px solid;
border-collapse: collapse;
}
#ddTopMenu td.first {
border-left-width: 0;
}
#ddTopMenu td.last {
border-right-width: 0;
}
</style>
</head>
<body>
<div id="ddTopMenu">
<table border="0" cellspacing="0">
<tr>
<td width="100" class="first"></td><td >Dictionary</td><td>Search</td><td>Sources</td><td class="last">References</td>
</tr>
</table>
</div>
</body>
</html>
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.