Given this table:
<table>
<tr>
<td rowspan="2"><a>Hello</a></td>
<td><a>World</a></td>
</tr>
<tr>
<td><a>!</a></td>
</tr>
</table>
I want to style the a element in every td to be 100 percent height:
table, td {
border: 1px solid black;
}
td {
height:400px;
}
a {
background-color: red;
height: 100%;
display:block;
}
This (JsFiddle) works fine on IE and Chrome. However Firefox seems to have a problem with the colspan.
So I tried to change the given fixed height on tr instead of td:
table, td {
border: 1px solid black;
height: 100%
}
tr {
height:400px;
}
a {
background-color: red;
height: 100%;
display:block;
}
This (JsFiddle) works fine on Firefox and Chrome, but not on IE.
On the right side is, what I want:
How can I make this work in all Browsers?
if you want more control over the TDs, i would highly suggest to use the display option of table and table-cell:
.table-wrapper{
position:relative;
display:table;
width:100%;
height:400px;
border:1px solid #000;
}
.table-wrapper a{
position:relative;
display:table-cell;
height:100%;
text-align:center;
vertical-align:middle;
}
you can easily choose the width, and control the content of "table-cell". This is supported by IE9.
link of demo:https://jsfiddle.net/keinchy/mq3nafje/6/
Related
In the following code I tried to make a long table scrollable ( with <thead> fixed ).
But the columns are not filling the table's width anymore, and thead columns are even not aligned with tbodys ones.
How to solve this ? is there another way to do the trick.
The code is here
<table>
<thead>
<tr>
<th>ROW 01</th>
<th>ROW 02</th>
</tr>
</thead>
<tbody>
<tr><td>LINE 01</td><td><img src="http://placehold.it/90x90"/></td></tr>
<tr><td>LINE 02</td><td><img src="http://placehold.it/90x90"/></td></tr>
<tr><td>LINE 03</td><td><img src="http://placehold.it/90x90"/></td></tr>
</tbody>
</table>
CSS here
table{width: 100%; background: #efefef; border-collapse: collapse }
thead, tbody{display: block}
thead{background: #555; color: white;}
tbody{height: 120px; overflow: auto}
td, th{ border: 1px solid red; }
You can try to turn your <tr> in display:table;+table-layout:fixed; It will help but columns may break from a row to another unless you set a fixed width to one or the other cell.
DEMO
Your CSS turns like:
table {
width: 100%;
background: #efefef;
border-collapse: collapse
}
thead, tbody {
display: block
}
thead {
background: #555;
color: white;
padding-right:1em;/* average width of the scroll bar of tbody */
}
tbody {
height: 120px;
overflow: auto
}
tr {/* here make those the table */
display:table;
table-layout:fixed;
width:100%;
}
td, th {/* set a width to go along with table-layout */
border: 1px solid red;
}
add this to your CSS
td:nth-child(1), th:nth-child(1) { min-width: 200px; } /* or the width you need, you may use percentages */
td:nth-child(2), th:nth-child(2) { min-width: 200px; }
since the browser adds a scrollbar, it needs to add the space for that element, thus, the misalignment will ALWAYS happen. The good news is that, in fact, you need to declare only the first column, so if you plan to use only 1 columns, just use something like this:
td:nth-child(1), th:nth-child(1) { width:20%; min-width: 200px; }
and it will be enough.
There's no way that I know to do this without declaring the width for AT LEAST the first column
try
thead, tbody{display:auto}
I have a html <table> that have dynamic width (changes with window size), and a fixed width <span> (500px).
I want to display both next to each other so that both would fill the whole width of the parent container
I want to do so only using CSS (not js)
I have been playing around with CSS but it seems to be ruining the table's width
HTML
<div class='container'>
<table class='table'>....</table>
<span class='span'>....</span>
</div>
CSS
.container {
......
}
.table {
.....
}
.span {
width: 500px;
display: inline-block; //or block if neccessary
}
You may give a try with the table-layout propertie to .container and span.
Browsers should create themselves the element missing to produce the first table-cell.
DEMO
span {
display:table-cell;
width:500px;
border:solid;
}
table {
border:solid;
margin:0;
width:100%;
}
.container {
display:table;
width:100%;
table-layout:fixed;
}
This should work
because of table-layout:fixed
and because browser should create themselves the missing element (like a tbody is always produced in a <table> when missing or when in a document is missing either tags like html or body ).
Demo
css
body, html {
margin:0;
padding:0;
}
.container {
}
table {
width: calc(100% - 500px);
border-collapse: collapse;
float: left;
}
/* Zebra striping */
tr:nth-of-type(odd) {
background: #eee;
}
th {
background: #333;
color: white;
font-weight: bold;
}
td, th {
padding: 6px;
border: 1px solid #ccc;
text-align: left;
}
.span {
display: inline-block;
width: 500px;
height: 100px;
background: red;
}
html
<div class='container'>
<table>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>etc</th>
</tr>
</thead>
<tbody>
<tr>
<td>Gaurav</td>
<td>Singh</td>
<td>etc</td>
</tr>
<tr>
<td>Gaurav</td>
<td>Singh</td>
<td>etc</td>
</tr>
</tbody>
</table> <span class='span'>....</span>
</div>
I know there are a lot of answers out there about this problem. But I can't seem to get it. Here is my example:
http://jsfiddle.net/xyJkc/2/
see the first div does not fill the total height of the td. I want the divs in each td to fill up the complete height no matter how much, or how little, text is in each one.
I guess the unclear thing is that the height of each row is not explicitly defined, but it is defined by the maximum height of the content of the cells.
Thanks the help!
here's the code:
html:
<table>
<tr>
<td>
<div>text</div>
</td>
<td>
<div>many lines of text. More and more.</div>
</td>
</tr>
</table>
css:
table {
width:100px
}
td {
border: 1px solid grey;
height: 100%;
}
div {
height: 100%;
border: 1px solid;
}
please try:
the div will be 100%; height.
div{
height: 100%;
border: 1px solid;
display:inline-block;
}
can you add display:inline-table;
div{
height: 100%;
display:inline-table;
border: 1px solid;
}
http://jsfiddle.net/xyJkc/13/
You can set a height on the table or tr. Then the div will fill the whole td.
Example:
tr{
height: 5em; /* or px */
}
I think it's because your div has position value set to static (by default). You can fix it by giving position:absolute; property to the tr or if you don't want to do this you can use jQuery:
$(function()
{
$('div').height($('tr').height());
});
Is there any way at all to make a table-cell smaller than its contents using purely css, and without altering the DOM?
Setting the width of a td to smaller than its child only makes it as large as its child for me. I also tried adding table-layout:fixed to the table but that didn't make any difference.
HTML:
<table>
<tr>
<td><div/></td>
<td class="mycell"><div/></td>
<td><div/></td>
</tr>
CSS:
table {
table-layout:fixed;
}
td {
border:3px solid black;
}
div {
border:3px solid red;
width:50px;
height:50px;
}
.mycell {
width:20px;
jsfiddle:
http://jsfiddle.net/clox/EzKNy/
Yes, that is possible. But you have to use the value max-width instead. So it reads:
.mycell {
max-width: 20px;
}
If you make inner div position absolute and outter td position relative, it will take inner div out of normal flow.
http://jsfiddle.net/EzKNy/2/
td {
border:3px solid black;
position:relative;
}
div {
border:3px solid red;
width:50px;
height:50px;
position:absolute;
}
I am trying to place two divs on the same line (preferably centered) inside a wrapper div. The code I have written works great in FF and IE10. Almost every version of IE <10 doesn't like it. Can anybody help, thanks!
html:
<div id="home_wrapper">
<div id="links_location" class="shadow">content</div>
<div id="iframe_location" class="shadow">content</div>
</div>
css:
#home_wrapper {
width: 100%;
text-align: center;
border: 1px solid blue;
float:left;
}
#links_location, #iframe_location {
display: inline-block;
background-color:White;
!important
}
#links_location {
width:20%;
height:400px;
text-align:left;
border: 1px solid red;
}
#iframe_location {
height:400px;
width:70%;
border: 1px solid black;
}
jsfiddle JSFiddle
How about:
#links_location, #iframe_location
{
background-color:White;
float: left;
}
Is it what you wanted? Updated jsfiddle
*Update*
Everything works fine for me in all IE versions if you place !important after white, like this background-color: White !important;. You screw up your css by placing it after semicolon :)