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.
Related
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.
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>
I am looking for a way to specify a table's width by specifying widths of its TDs.
In the following scenario (try it live on jsfiddle) you can see that I have specified width of each TD as 100px and I expected to get a 300px table (and a horizontal scrollbar for div) but in practice browsers give them a width of 63px (that's table's width divided by 3)
Is there any way to make TDs determine the width of table and not other way round? So far I have tried different values of table-layout, display, overflow for TD and TABLE without any success.
The html:
<div>
200px
<table>
<tr>
<td>100px</td>
<td>100px</td>
<td>100px</td>
</tr>
</table>
</div>
and a minimal CSS:
div {
width: 200px;
height: 300px;
border: solid 1px red;
overflow-x: scroll;
}
td {
width:100px;
border: solid 1px #000;
}
table {
border-collapse: collapse;
}
A simple solution is make the td's content be 100px wide.
<div>
200px
<table>
<tr>
<td><div class="content">100px</div></td>
<td><div class="content">100px</div></td>
<td><div class="content">100px</div></td>
</tr>
</table>
</div>
.content {
width: 100px;
}
Simplest solution appears to be setting min-width instead of width for TDs.
If you're dynamically generating the table, you could just dynamically set the width of the table while you're at it. Just calculate the desired width, and add style="width:300px;" (or whatever) to the <table> tag.
Not that the other options people have posted here aren't also perfectly valid, of course.
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 an html table of width 222px
Inside in I have a single row with width defined as 160px.
Inside this row, there is a single column having same width as that
of the row.
My question is, how to align this row to the center of the table.
I have tried align="center"and style="float:center;" but these work only
on the contained text.
But if you really, really must use a table, here's how to style it:
.resultset {
width:222px; border:1px solid;
border-collapse:separate; border-spacing:30px 2px;
}
.resultset td {
border:1px solid;
}
Where the 30px in the border-spacing is half the horizontal difference between the table width and the cell width.
See jsFiddle.
Agree with Quentin. There is no point having a 1x1 table.
Try with the following.
<div style="margin: 0px auto; position: relative; width: 222px;">
....your content
</div>
You might want to create a CSS class for the div. I personally don't like having inline styles.
you can try this like that
<table width="222px" align="center">
<td width="31px"></td>
<td width="160px">test</td>
<td width="31px"></td>
</table>
test here : http://www.webmasterorbit.com/wysiwyg-html-tester.html
You must use this
<td align = 'center'>Blah blah</td>
using this wont work
<tr align = 'center'></tr>