I have a table where I need a vertical spacing between cells AND a bottom border that is not cut by the vertical spacing. If I use for example this CSS:
table td {
border-right: 15px solid transparent;
}
table tr {
border-bottom: thin solid #d6d6d6;
}
... the bottom border is cut by the vertical borders. I have also tried border-spacing (and 'border-collapse: separate') with no luck. I really need the bottom border to span uncut under all cells in a row. Is there any way to accomplish this?
EDITED:
As most answers suggest that I use padding, I add this image to show what happens. An image within a cell extends beyond the padding and ends up to close to the next cell (I use Firebug to select the td element and to show the right padding here:
So I need to accomplish a border-spacing that keeps the cell content at a distance from the necxt cell AND without cutting the bottom border.
/* COLLAPSE CELLS */
table {
border-collapse: collapse;
}
/* SPACE CELLS */
table td:not(:last-child) {
padding-right: 15px;
}
/* BORDER BOTTOM */
table td {
border-bottom: 1px solid #000;
}
<table>
<tr>
<td>Cell 1</td>
<td>Cell 1</td>
</tr>
<tr>
<td><img src="http://lorempicsum.com/futurama/300/300/2"></td>
<td>Cell 1</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Looooooooooooooooooooooooooooooooong Text</td>
</tr>
</table>
Don't use transparent border's just add spacing at bottom of cells with padding.
table td {
padding-bottom:10px;
}
Thanks Apolo, you gave me the solution in the comment. There was in fact another CSS rule ( table{width: 100%;} ), provided by the framework (I use Drupal 7), that broke my own rule. Problem solved.
Related
Consider this HTML file:
<!DOCTYPE html>
<html>
<head>
<title>Two tables before</title>
<meta charset="utf-8">
<style>
table
{
font-family: monospace;
font-size: 15pt;
border: 1px solid #000;
border-collapse: collapse;
margin-top: none;
margin-bottom: none;
}
td, th { border-left: 1px solid #000; }
#bottom-table { caption-side: bottom; }
</style>
</head>
<body>
<table>
<caption>Before: top table caption</caption>
<tbody>
<tr>
<td>This is a row in the top table which should be about this long</td>
</tr>
</tbody>
</table>
<table id="bottom-table">
<caption>Before: bottom table caption</caption>
<tbody>
<tr>
<td>This is a row in the bottom table</td>
<td>widen this</td>
</tr>
</tbody>
</table>
</body>
</html>
This file renders like this in Chrome:
Note that the two tables are adjacent with no space separating them. This
is what is wanted. Note also that the tables are of different widths. This
is not wanted. Rather, it is desired that the width of the second td in
the bottom table row be extended so that the bottom table width becomes the
same as the top table width. Something like this:
The image above is a bit off. What is wanted is for the tables to be of
exactly the same width. Of course, ideally, the HTML/CSS to achieve this
would not require absolute widths, so that changes in the width of the
first table would automatically cause the second table width to change.
Also, I would much prefer a solution in HTML and CSS only, no JavaScript.
If you want a fluid width for both tables where they must also be equal in width, set them both to width="100%" and then make sure they fill the same parent div. Then, they should always be as wide as the parent which you can make relative and fluid to the page.
The page consists of two tables (golf scores). The first, which is always wider than the second, includes two columns of names and therefore its total width will vary from league to league. The second table only contains numbers and its width will be constant.
I want to align the left edge of the two tables while keeping the first table centered.
If I knew the width of the first table then the issue would be simple, use css to set the html width to that of the table and set the two table left margins to 0. But with the width being fluid the tables move with different content.
How do I solve this dilemma?
Here is a fairly easy and robust way of solving this problem.
First, create a wrapper elements to contain the two tables, .wrap in my example.
On .wrap, set display: table and margin: 0 auto. This will force .wrap to take a shrink-to-fit width, and then the margin trick will center the block.
Your two child tables will then be aligned to the left by default.
.wrap {
display: table;
border: 1px dashed blue;
margin: 0 auto;
}
table {
border: 1px dotted blue;
margin: 20px;
}
table td {
border: 1px solid gray;
}
<div class="wrap">
<table>
<tr>
<td>First Wide Column With Long Names</td>
<td>Second Wide Column with Very Long Names</td>
</tr>
</table>
<table>
<tr>
<td>First Short Column</td>
<td>Second Short Column</td>
</tr>
</table>
</div>
You can also see jsfiddle at: http://jsfiddle.net/audetwebdesign/qt5ffzuo/
One way to do this is to add a wrapper around the tables that has display: inline-block. This will make the wrapper shrink to fit around the largest table. It will also allow you to center it horizontally by setting the parent (for example the body) to text-align: center.
To make sure the text in the tables is not also centered, you'll have to set text-align: left to the wrapper contents.
body {
text-align: center;
}
.wrapper {
display: inline-block;
border: 1px solid red;
text-align: left;
}
table, tr, td {
border: 1px solid blue;
}
<div class="wrapper">
<table>
<tr><th>Name</th><th>Score</th></tr>
<tr>
<td>Johnny</td>
<td>12</td>
</tr>
<tr>
<td>Jimmy</td>
<td>12.412.002</td>
</tr>
</table>
<table>
<tr>
<td>6</td>
<td>3</td>
</tr>
<tr>
<td>5</td>
<td>4</td>
</tr>
</table>
</div>
Quick question. I have a table, it has a border. When I add padding, it adds the padding from the inside of the table. Any way to make it add padding from outside the border?
Essentially, the table border lines should appear to be within its cell.
Im not 100% sure what you mean but you may want this.
HTML:
<table>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</table>
CSS:
body {
padding: 20px;
}
table {
width: 400px;
height: 400px;
outline:2px solid red;
outline-offset: -15px;
}
td {
border:2px solid blue;
}
Table only:
DEMO HERE
Cell only:
DEMO HERE
So here we are setting an outline and you can put an outline-offseton it. So this will bring it into the table if you use - value. Use it as a border but remember it doesn't count towards width or height.
Note: You can use this on each cell etc.
if i understand you right then you should use margin not padding.
I want to create a table that is fully contained within its parent element, but having column widths that are resolved based on their content. If the required length of the table is longer than the content box of the parent element, then a horizontal scrollbar shall appear underneath the table. I tried fiddling with the table-layout and overflow properties, but without success.
HTML code:
<div>
<table>
<tr>
<td>fixed_length_text</td>
<td>variable_length_text</td>
<td>image</td>
<td>double_float_double_float</td>
</tr>
<tr>
<td>fixed_length_text</td>
<td>variable_length_text_variable_length_text</td>
<td>image</td>
<td>double_float_double_float</td>
</tr>
</table>
</div>
CSS code:
div {
padding: 10px;
background: grey;
width: 400px;
}
table {
border-collapse: separate;
border-spacing: 2px;
background: white;
}
tr {
background: green;
}
This is what I have tried on jsFiddle. Is there anyway to combine the best of both worlds?
Try overflow-x:auto;. This applies to just the horizontal axis of the element.
if i understand you right than:
http://jsfiddle.net/nfg34/1/
I have a div with position absolute and width:100% inside a table cell and the width is calculated to window width not to table cell width. The table cell width is also variable so I need that the width of absolute div to be the same as table cell width. How can I do that?
From w3schools.com
An absolute position element is positioned relative to the first parent element that has a position other than static.
That part often gets overlooked I think.
So, try setting the td to position:relative and see if that gets you what you are after.
This is the way I got this to work:
<table border="1" class='rel'>
<tr>
<td><div class='abs'>row 1, cell 1</div></td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
* { margin: 0; padding: 0; }
.rel {
position: relative;
}
.abs {
position: absolute;
background-color: red;
top: 1px; /* offset because of table border */
left: 1px;
}
Notice the relative style is applied to the table not the tr or td. When I applied it to the td (what i expected was going to be necessary) it did not work in Chrome. Here is a jsFiddle for you to play with:
http://jsfiddle.net/bNweT/1/
Hope this helps.
Bob
I believe that this can be done only via JavaScript.
Update
I tried width: auto;, but if it has position absolute it does not take the width of the parent element in DOM.
(I am testing in Chrome and Firefox)