Please test this fiddle in Chrome and Firefox. They work differently.
In Firefox background is at right position (top enough from the text). But in Chrome background lies below the expected level.
I found an answer here. Bu it does not work for me. I cannot set my table rows to display: block
And I cannot set top padding to tds. Because there has an element with absolute position inside tds which takes full height of td.
The ultimate goal is set background position to top and maintain a distance between each vertical td.
Thanks for helping.
table {
border-collapse: separate;
width: 100%;
}
tr {
background: url(http://dummyimage.com/10x5/000/fff.jpg) repeat-x left top;
}
td {
border-top: 30px solid transparent;
}
<table>
<tbody>
<tr>
<td>tr1 td1</td>
<td>tr1 td2</td>
<td>tr1 td3</td>
</tr>
<tr>
<td>tr2 td1</td>
<td>tr2 td2</td>
<td>tr2 td3</td>
</tr>
</tbody>
</table>
By default, the background-origin property is set to padding-box.
It seems the problem is due to discrepancies about determining the padding box in tabular layouts.
The solution is setting the property to border-box:
tr {
background-origin: border-box;
}
table {
border-collapse: separate;
width: 100%;
}
tr {
background: url(http://i.stack.imgur.com/P4wQ9.jpg) repeat-x left top;
background-origin: border-box;
}
td {
border-top: 30px solid transparent;
}
<table>
<tbody>
<tr>
<td>tr1 td1</td>
<td>tr1 td2</td>
<td>tr1 td3</td>
</tr>
<tr>
<td>tr2 td1</td>
<td>tr2 td2</td>
<td>tr2 td3</td>
</tr>
</tbody>
</table>
Related
Setting some tds to have border widths to "thin" and some to "0" with border-collapse: collapse; I would have thought would give me no 2px-wide borders, but yet I get inconsistent borders. It seems to be a problem when one has display:flex on it--gets rendered 2px wide instead of 1px, as if there is no border-collapse. Is this a shortcoming of Chrome or am I missing a CSS technique?
Does anyone have insight on what circumstances cause border-collapse to fall short of the ideal in Chrome?
Here's the effect in an example - cell two seems to ignore border-collapse.
table {
box-sizing: border-box;
border-collapse: collapse;
}
td {
border-left: thin solid #d3d3d3;
border-right: thin solid #d3d3d3;
}
.d-flex { display: flex; }
<table class="my-grid">
<tr>
<td>cell one</td>
<td class="d-flex">cell two</td>
</tr>
<tr>
<td>cell three</td>
<td>cell four</td>
</tr>
</table>
The border-collapse property only applies to table and inline-table elements.
You're telling the table cell to display as flex instead of an inline-table element so it can't collapse its borders.
Note that this is not specific Chrome either. Testing in Edge and Firefox yields the same result.
Using display: flex; makes the cell lose some of its desirable table cell properties, since it is no longer set to display: table-cell;, and there is no display: table-cell-flex.
So the only solution seems to be to add a container <div> element inside the <td>, which should by nature take up the entire table cell except for its padding if any, and make it have display: flex; so that I can use flexbox styles for the content.
table {
box-sizing: border-box;
border-collapse: collapse;
}
td {
border-left: thin solid #d3d3d3;
border-right: thin solid #d3d3d3;
}
td {
display: table-cell;
vertical-align: inherit;
}
.d-flex { display: flex; }
<table class="my-grid">
<tr>
<td>cell one</div></td>
<td><div class="d-flex">cell two</div></td>
</tr>
<tr>
<td>cell three</td>
<td>cell four</td>
</tr>
</table>
I have removed padding from all TD elements in stylesheet. But I have a special table having cellpadding="10". Its TD are rendered having 0px padding due to above mentioned style.
how should I reset TD padding to nothing so it inherits the 10px padding from cellpadding?
td {padding:0}
#specialtable td {
/* What should I write here? */
}
<table id="specialtable" cellpadding="10" style="border:1px solid #555555">
<tr>
<td>test</td>
</tr>
</table>
You can use the :not pseudo-class to define the padding for all td except those under a #specialTable.
table:not(#specialTable) td {
padding: 0;
}
<table id="specialTable" cellpadding="10" style="border:1px solid #555555">
<tr>
<td>test</td>
</tr>
</table>
From here one can see that we can define an inherit value for the padding, which should inherit the padding from the parent. As far as I know that is the default value. So you can set the padding to default by giving it the inherit value.
According to spec, Fixed table layout won't work with width set to auto:
17.5.2.1 Fixed table layout
With this (fast) algorithm, the horizontal layout of the table does
not depend on the contents of the cells; it only depends on the
table's width, the width of the columns, and borders or cell spacing.
The table's width may be specified explicitly with the 'width'
property. A value of 'auto' (for both 'display: table' and 'display:
inline-table') means use the automatic table layout algorithm.
However, if the table is a block-level table ('display: table') in
normal flow, a UA may (but does not have to) …
Is there any hack to make it work anyway (using pure CSS)?
What I have: table-layout: fixed takes no effect with width: auto:
table{
/* those two won't work togheter */
table-layout: fixed;
width: auto;
}
td{
/* pure visual purpose */
border: 1px solid black;
padding: 10px;
}
<table>
<tr>
<td>Mid long text</td>
<td>The very longest text</td>
<td>Short</td>
</tr>
</table>
What I want to get: All table cells's width is set to the widest one:
// width of widest table cell (in px)
var max = 0;
// get width of widest table cell (in px)
$('table td').each(function(){
max = Math.max(max, $(this).width());
});
// set width of all cells to the width of widest one
$('table td').each(function(){
$(this).css('width', max +'px');
});
table{
/* those two won't work togheter */
table-layout: fixed;
width: auto;
}
td{
/* pure visual purpose */
border: 1px solid black;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>Mid long text</td>
<td>The very longest text</td>
<td>Short</td>
</tr>
</table>
Just assign a percentage width to the td - you don't need any CSS rule for table itself then (see snippet)
.container {
background-color: #0fa;
}
table {
background-color: #fa0;
}
td{
border: 1px solid black;
padding: 10px;
width: 33%;
}
<div class="container">
<table>
<tr>
<td>Mid long text</td>
<td>The very longest text</td>
<td>Short</td>
</tr>
</table>
</div>
I have the following code here:
table {
border-collapse: collapse;
border-spacing: 0px;
resize: both;
}
td {
border: 2px solid black;
padding: 10px 20px 10px 20px;
margin: 0px;
resize: both;
overflow: auto;
}
div {
resize: both;
overflow: auto;
width: 120px;
height: 120px;
border: 1px solid black;
}
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<br>
<div></div>
It doesn't work in Chrome, Safari or IE.
If you re-size the width of the top-left cell, and then re-size the width of the middle-left cell it will not let you downsize the width.
If you try to downsize via the top-left cell again it will not work
either.
How should I fix it?
When you resize an element using the CSS resize property, a CSS height/width are applied inline to that table cell.
Example:
Now, let's resize the cell below it so that the width is smaller:
It doesn't work, the width of the top cell does not change and the column remains the width of its largest cell.
This particular behaviour is not a bug, it is a limitation of the resize property. To get the result that you want, you would need to adjust the width of all the cells in the column, when one is resized. This would require javascript.
Note: I'm not saying that Chrome (tested 44.0.2403.130 m) doesn't have bugs using the resize property on table cells, it does display very buggy behaviour.
Maybe the bug is your code. You may not to allow resize tables and tds. You can resize divs inside your td and it was correct. Table and cell resizing is not allowed in firefox and in webkit browsers it is dangerous.
You can make something like this:
<table>
<tr>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
</tr>
<tr>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
</tr>
<tr>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
</tr>
</table>
<br>
<div></div>
And the css
table, td { resize: none; }
table td div { min-width: 50px; min-height: 50px; resize: both; }
Please see the following example:
http://jsfiddle.net/6t6hq/7/
when I use td with position relative to move it,
it only move the content but not the border.
How can I move the border with the content?
<table>
<tr>
<td id="relativeTD">1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
<div id="expected">expected</div>
<style>
td{
border:1px solid #000;
min-width:100px;
}
#relativeTD{
position:relative;
left:60px;
}
#expected{
border:1px solid #000;
position:relative;
left:60px;
}
</style>
TD is of display: table-cell;!
So you can't move it using relative positioning. Instead, create another <div> inside the <td> and give border and stuff.
Instead, give position: absolute for the td. It works! Also, you need to give position: relative to the table.
Fiddle: http://jsfiddle.net/6t6hq/9/
Else, you can use margin-left too to the td.
You cannot move a single td border you need to move the whole table
Demo
table {
margin-left: 60px;
}
Either what you can do is give your table border: 0;, place a div inside your td
give it some width, border and position: relative with left: 60px; and you are good to go