I have a table row with two cells inside, the height is different because the data inside changes, so I cannot set an explicit height.
The two cells contain div's and are likely to be different heights due to the content inside, my question is is it possible to have a cell take up 100% height so they both cells match?
It's a bit vague in text form, so here's an example.
The second cell and div should match the height of the first.
Unfortunately I've tried setting the height to 100% without success.
td, div {
height:100%;
}
In order to use the 'height:100%' tag, all parents also are required to have a height value set.
For example, see here:
td {
width:100px;
vertical-align:top;
}
table, tr, td{
height: 100%;
}
td div {
background-color:grey;
height: 100%;
}
can't you put background color in the TD??
But if you want div to expand, you can do this
div {
background-color: grey;
display: inline-block;
height: 100%;
}
Related
I have a table that displays text fetched from an API using JS and because of that a lot of my cells have different length. I've been trying to create a table with a vertical and horizontal scroll, which I managed to do but I can't seem to figure out how to adjust table row length so that entire text is shown, instead of being cut out. I would like for a cell to have a maximum length and if that length is exceeded the text is shown on the next line. This might not be doable with css only but any solution is welcomed.
Here is a quick look on my issue
Here is part of my CSS for the Match History Table
* {
box-sizing: border-box;
}
.table2 {
position: fixed;
top: 450px;
left: 400px;
border-collapse: collapse;
width: 1001px;
overflow-x: scroll;
display: block;
}
.table2 tbody {
overflow-y: scroll;
overflow-x: hidden;
height: 300px;
}
.table2 td, th {
min-width: 100px;
height: 25px;
border: dashed 1px lightblue;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100px;
}
1st part of your issue is some cells needing longer lengths than others, so you could set the colspan for those longer than the others.
2nd part is by setting a max-width on those columns you can program how they behave when text is too long for the cells width. If you already know which column's cells will need more room, try adding a larger max width for those cells which will affect all cells in that column.
td:nth-child(1) {
width: 100px
}
td:nth-child(2) {
max-width: 400px; /* Comment this line to see the width stretch based on cell's
content */
}
I have included a working example of how you should set colspan and a modified version of your CSS here: https://codepen.io/TxsAdamWest/pen/NWbOwRW
I managed to fix my issue by adding a class with a min-width attribute to the headers that needed their length adjusted and as for the body, since it is generated dynamically using JS I did the same thing using cell.style.minWidth to a specific row.
I have the following table:
<table>
<tbody>
<tr>
<td colspan="2">
<img src="http://www.sherv.net/cm/emoticons/cats/cat-headphones-smiley-emoticon.gif" />
<img src="http://www.beaukit.com/catgrpbl.jpg" />
</td>
</tr>
</tbody>
</table>
and the following CSS:
table {
width: 40%;
background-color:grey;
text-align: center;
margin-bottom: 20px;
}
img {
max-width: 100%;
margin: 0 0 0.8em 0;
max-height: 800px !important;
width: auto !important;
height: auto;
}
See Jsfiddle
What I want is that the pictures in the cell fill its width if they are bigger than the cell itself. In case the pictures are smaller, they should keep maintain their native width expressed via max-width. This seems to work well in Chrome, but when I try it in firefox the bigger pictures stretch the width of the cell.
While, if I change the width of the images to: width: 100% !important;, the smaller picture are streched to fill the cell (see table.two).
How can I solve the issue?
try adding
table {
table-layout:fixed;
}
Table cells don't behave like block elements, their widths and heights are defined by the content inside them. From the I.E. documentation:
auto: Default. Column width is set by the widest unbreakable content in the column cells.
fixed: Table and column widths are set either by the sum of the widths on the col objects or, if these are not specified, by the width of the first row of cells. If no width is specified for the table, it renders by default with width=100%.
You have use width auti !important which you should not be to
table tr, table tr td{
width:100%
}
table tr td a{
width:100%;
display:block;
}
img {
width: 100%;
}
Check on Fiddle
I have a website with two columns, within a wrapper div.
The wrapper has the same height as the tallest div by giving floating everything and giving the wrapper height:100%.
Here's my problem: one of the columns is a div with overflow:scroll and several images in it. I tried to set its height to 100%, thinking that it would take up the full height of the wrapper. Instead, it became the height of all the images on top of each other.
If I set the height of the column with images (#rightbox) to a specific height in pixels, this happens.
I want it to have the same height as the other div with text, so I set its height to 100%. Then this happens.
How can I make the two columns have the same height?
EDIT: I forgot to mention that the amount of text varies, so I can't define a specific height for the wrapper.
You cannot define height as 100% unless your parents provides an actual heights.
#wrapper {
height: 800px;
}
/* Now you can make the columns inside take the full height of its parent *?
#wrapper .columns {
height: 100%;
overflow: auto;
}
Note: if the wrapper sits inside the body element then you will need to set html,body { height: 100%; } before the wrapper can be set to 100%
Given the limited amount of code provided... here is a pure css solution.
http://jsfiddle.net/rlemon/Q7MvS/
.wrapper {
height: 600px;
width: 800px;
}
.panel {
float: left;
width: 400px;
height: 100%;
}
.panel.right {
overflow: scroll;
}
I'm trying to fix a table header to the top of a window, but for some reason setting the widths of the <td> and <th> elements in the following way doesn't result in the elements having the same width (the column headers are not aligned with the other column cells):
th, td {
padding-left: 20px;
}
td:first-child, th:first-child {
width: 80px;
}
td:nth-child(2), th:nth-child(2) {
width: 200px;
}
td:last-child, th:last-child {
width: 320px;
padding-right: 20px;
}
Here's a jsfiddle example that illustrates this: http://jsfiddle.net/zgaPw/1/
After experimenting with it, I found that the font-size property seems to affect the width of the <td>, but I'm not sure why or how to correct it.
Can someone shed some light as to what is wrong and how to correct it? Thanks!
The width of cells are affected by their siblings (other cells), and the parent (<table>). To get the cells have the same width, define a width property on the cell which is equal to:
For each cell:
width + padding left + padding right
= 660px;
At your first row, containing the <th> elements, you have defined a width of 600px, which causes the head to shrink a little. To fix this, remove the width property on the row, or define width:660px;.
Fiddle: http://jsfiddle.net/zgaPw/4/
If I have a table like this very very simple example:
table {
table-layout:fixed;
width:300px;
}
.td1 {
width:100px;
}
.td2 {
width:200px;
}
and in one of my .td2 contains an image that is, lets say, 300px in width. I would like to show scroll bars to allow users to scroll to see it all. However I don't think this is possible, is it?
So my questions are:
Are there any other options apart from hidden for handling overflow in tables?
Is it possible to show scroll-bars only when content pushes beyond a set width? (I swear I've seen it in some forum software but I can't remember which one)
What about
overflow: auto
Content is clipped and scrolling is
added only when necessary.
Put the image inside a div in the table cell and make the width and height of the div to be 100% of the td and style it to overflow: auto
<style>
.test { width: 100%; height: 100%; overflow: auto; }
</style>
<td>
<div class="test">
your image
</div>
</td>