I am creating a table and would like to set the width of the column to be a specific %, for example 10%, regardless of the number of columns. The table is generated from a query and so may have 1 column or it may have 5. Either way I would like the width of each to be the specific % width. For example, using the this html with css of width='10%'
<table>
<tr>
<td class='width10'> ....... </td>
</tr>
</table>
but this does not display as 10% into the page, more like 30%.
Strangely if I change it to 5% width it goes to about 50% of the page, if I set it at 25% it goes to about 5%.
When you set width using a percent you are setting it as the percent of the containing element, not the page/viewport/whatever you thought.
Therefore, it dosen't make any sense to set TD's using %, because it will always be % of the <tr>/<table> and the table gets it's width from the td's.
use something else. OR, set the table width explicity :)
<table style="width:100%;">
based on our conversation, this is what you were looking for..
<div style="width:100%">
<div class='border width10'> ....... </div>
<div class='border width10'> ....... </div>
<div class='border width10'> ....... </div>
</div>
.width10 {
width: 10%;
display:inline-block;
margin:0;
padding:0
}
.border {
border: 1px solid black;
}
Related
I am trying to put a red rectangle icon followed by some text within a HTML Table cell and I am getting very strange behavior here. I am using just a DIV to draw the red rectangle as shown in the example here. I want the height of rectangle to be the height of the cell so I set the height: 100%
https://jsfiddle.net/pm43k26w/1/
<table border="1">
<td>
<div style="width:10px;height:100%;background:red;display:inline-block"></div>
Height in percentage
</td>
<td>
<div style="width:10px;height:10px;background:red;display:inline-block"></div>
Fixed Height
</td>
</table>
The solution kind of works in Chrome but not in FireFox. FireFox just shows a blank space. It appears it does not like it when I set the height to 100% Can anyone explain why? What's the best way to accomplish this if DIV isn't the right way to go for the rectangle?
Thanks.
Firefox needs content in the div. The following modification will do. The numerical entity is Unicode's 'zero width space character'. A non-breaking space ( ) will do as well, of course.
<div style="width:10px;height:100%;background:red;display:inline-block"></div>
See this fiddle.
Try setting the height of the parent element.
<td style="height:20px">
That should help with the Firefox problem.
Edit: JSFiddle:
https://jsfiddle.net/prove64m/
First of all you forgot the <tr> tag.
So this should be the correct HTML:
<table>
<tr>
<td>
<div></div> first text
</td>
<td>
<div></div> second text
</td>
</tr>
</table>
Then the CSS part:
table {
border:1px solid;
}
td {
height:40px;
}
div {
display:inline-block;
vertical-align:bottom;
width:10px;
height:100%;
background:red
}
Pay attention that the height is ALWAYS evaluated, so, if there isn't any explicitily set, there is nothing "to compute"; we did this here:
td {
height:40px;
}
Other important thing; i guess you would like to control the position of the text after the <div> element; this is possible with online-block elements in this way:
div {
...
vertical-align:bottom;
...
}
Other possible values are: middle, top,...
here the Fiddle: https://jsfiddle.net/pm43k26w/5/
Firstly, you need to understand the problem here. CSS Properties such as height are "Computed". In this particular case, the computed height of the first div (let's call it unseenForce, shall we?) is 0 while its cousin, aptly named seenForce is 10px. See this below :
http://jsfiddle.net/gvo4kf41/
$(document).ready(function() {
$('.Info').html('The computed height of the unseenForce is ' + $('#unseenForce').height() + 'px <br />');
$('.Info').append(document.createTextNode('The computed height of the seenForce is '+ $('#seenForce').height() + 'px'));
});
.Info {
color: red;
margin-top : 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<table border="1">
<td>
<div id="unseenForce" style="width:10px;height:100%;background:red;display:inline-block"></div>
Height in percentage
</td>
<td>
<div id="seenForce" style="width:10px;height:10px;background:red;display:inline-block"></div>
Fixed Height
</td>
</table>
<div class="Info">
</div>
This is because none of the ancestors of the unseenForce have a specific height to them. Hence, Firefox is unable to attach a height to it.
What you need to do it force the Computed value of height to be greater that 0. There are many ways to do it and all the answers here show you different ways of doing it. Choose the one which suits your needs.
Here's the way I would do it. Just add height to the row (<td>).
table td {
height: 10px;
}
<table border="1">
<td>
<div id="unseenForce" style="width:10px;height:100%;background:red;display:inline-block"></div>
Height in percentage
</td>
<td>
<div id="seenForce" style="width:10px;height:100%;background:red;display:inline-block"></div>
Fixed Height
</td>
</table>
<div class="Info">
</div>
Hope this helps!!!
I have a table that contains variable amounts of text in several columns with fixed widths. Some of the columns will allow the text inside of them to grow until it is all showing, but the others will be limited to that height, even if they have text that ends up hidden. Is there any way to do that without any JavaScript?
A couple notes:
I don't know what the text will be so I can't set a concrete height on the row itself.
Previously, I set the height of the text boxes that couldn't grow to be very small, then found them after the page loaded, set their row height to be a concrete number, and set their height to inherit. That was too slow, though, as I will have a lot of rows.
Here is the shell of a table that kind of shows what I'm going for. I need to know how to write out the classes.
<table>
<tr class="rowCanGrow">
<td class="canGrowTD" style="width:90px;">
<div class = "canGrow">Should see all of this text.</div>
</td>
<td class = "cantGrowTD" style="width:80px;">
<div class = "cantGrow">Should see all of this text.</div>
</td>
<td class="canGrowTD" style="width:100px;">
<div class = "canGrow">(Controller) Should see all of this text.Should see all of this text.</div>
</td>
<td class = "cantGrowTD" style="width:100px;">
<div class = "cantGrow">This one should get cut off mid sentence, and definitely shouldn't be allowed to grow as far down as it wants to grow.</div>
</td>
</tr>
</table>
Edit Added a space so that the words break correctly and the width's stay consistent, since it's unrelated to what I'm trying to solve.
Edit 2 Clearing up some things. The cells should all have fixed widths (added inline styling) and note that I won't be able to set a concrete height anywhere because I won't know what that is until the text has rendered and set it.
Edit 3 Here is the desired result:
You can set to you div height and width as 100%, with overflow: hidden; to hide scrollbar. Second, you should set the any height of your <td>. So, basically the div's height is that of the containing cell and the text cannot grow the div, keeping the cell/row the same height no matter what the window size is.
td.canGrowTD > div {
width: 100%; height: 100%; overflow:hidden;
}
td.canGrowTD {
height: 20px;
}
<table>
<tr class="rowCanGrow">
<td class="canGrowTD">
<div class = "canGrow">Should see all of this text.</div>
</td>
<td class = "canGrowTD">
<div class = "cantGrow">Should see all of this text.</div>
</td>
<td class="canGrowTD">
<div class = "canGrow">(Controller)Should see all of this text.Should see all of this text.</div>
</td>
<td class = "canGrowTD">
<div class = "cantGrow">This one should get cut off mid sentence, and definitely shouldn't be allowed to grow as far down as it wants to grow.</div>
</td>
</tr>
</table>
There is a way to do this as it turns out. Here is the solution:
td {
vertical-align:top;
}
.cantGrowTd {
height:100% !important;
position:relative;
overflow:hidden;
}
.cantGrowTd div.cantGrow {
position:absolute;
height:100% !important;
max-height: initial !important;
overflow: visible !important;
}
You can most likely ignore the "important" statements as they are not required unless your td elements and divs are setting their own properties that need to be overridden (as mine do in my actual application).
I am trying to give min width to table cells using col element of colgroup. The table is wrapped by a div which has some width set(less than combined width of all cells set in col) and overflow of div is set to auto.
Here is my html code -
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.table-block {
border-spacing: 0;
border-collapse: collapse;
}
.cell {
padding: 5px 10px;
border: 1px solid silver;
}
</style>
</head>
<body>
<div style="width:200px;overflow: auto">
<table class="table-block">
<colgroup>
<col style="width:300px">
<col style="width:300px">
</colgroup>
<tbody>
<tr>
<td class="cell"><em>2(0,2)</em></td>
<td class="cell"><em>3(0,3)</em></td>
</tr>
<tr>
<td class="cell"><em>2(0,2)</em></td>
<td class="cell"><em>3(0,3)</em></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
My problem is cells doesn't take width from col. It is trying to fit themselves in the wrapper div. I want that the cells take the proper width given and a scrollbar should appear. I have a solution that I set table width set to the total width I need. This would require me to update table width every time I insert new column by JavaScript.
My Solution -
<div style="width:200px;overflow: auto">
<table class="table-block" style="width:600px">
<!-- table things -->
</div>
Is it a right thing to do? And why it happens?
jsFiddle link
I think the problem here is that ultimately the table defaults to 100% width of the container, and its inner elements are unable to surpass this without their content forcing it to do so. The same happens when attempting to give a tr or td a width greater than the table's own.
Your fix is pretty much the way I'd do it. The only change I'd make is:
<div style" ... overflow-x:scroll; overflow-y:hidden;">
This way a scroll bar won't appear down the side on older versions of IE.
This of course assumes that you only want your table to scroll horizontally.
I want to accomplish the following using only CSS and HTML, and not use JavaScript.
I have a simple HTML table that looks like this. Both columns contain dynamic content, but the left has a scrollable div. I want the display height of that scrollable div to size according to the table, and have the table size be set only by the dynamic height of column2.
<table>
<tr>
<td class="column1">
<div>
...
</div>
</td>
<td class="column2">
<div>
...
</div>
</td>
</tr>
</table>
I want the table to adjust its height according to dynamic content in column2 only, not column1, so that I can have a scrollable div in column1 that sizes to the height of the table set by column2 automatically when the page is rendered.
I have found solutions using jQuery, but the performance is very poor when I use height() or outerHeight() to find the height of the right column and set the div inside the left column appropriately, especially when the right column contains a large number of HTML elements which are in their own scrollable divs.
You can use absolute positioning:
table {
position: relative;
}
td {
background: red;
width:200px;
}
.column1>div {
height:100%;
overflow: auto;
position: absolute;
top:0;
width:200px;
}
<link rel="stylesheet" href="del.css">
<table>
<tr>
<td class="column1">
<div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>Text
</div>
</td>
<td class="column2">
<div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>Text
</div>
</td>
</tr>
</table>
Also available as a jsfiddle.
<table>
<tr>
<td>Test</td>
<td>A long string blah blah blah</td>
</tr>
</table>
<style>
td{max-width:67%;}
</style>
The above does not work. How can I set the max-width of a table cell using percentages?
Old question I know, but this is now possible using the css property table-layout: fixed on the table tag. Answer below from this question CSS percentage width and text-overflow in a table cell
This is easily done by using table-layout: fixed, but a little tricky because not many people know about this CSS property.
table {
width: 100%;
table-layout: fixed;
}
See it in action at the updated fiddle here: http://jsfiddle.net/Fm5bM/4/
According to the definition of max-width in the CSS 2.1 spec, “the effect of 'min-width' and 'max-width' on tables, inline tables, table cells, table columns, and column groups is undefined.” So you cannot directly set max-width on a td element.
If you just want the second column to take up at most 67%, then you can set the width (which is in effect minimum width, for table cells) to 33%, e.g. in the example case
td:first-child { width: 33% ;}
Setting that for both columns won’t work that well, since it tends to make browsers give the columns equal width.
I know this is literally a year later, but I figured I'd share. I was trying to do the same thing and came across this solution that worked for me. We set a max width for the entire table, then worked with the cell sizes for the desired effect.
Put the table in its own div, then set the width, min-width, and/or max-width of the div as desired for the entire table. Then, you can work and set width and min-widths for other cells, and max width for the div effectively working around and backwards to achieve the max width we wanted.
#tablediv {
width:90%;
min-width:800px
max-width:1500px;
}
.tdleft {
width:20%;
min-width:200px;
}
<div id="tablediv">
<table width="100%" border="1">
<tr>
<td class="tdleft">Test</td>
<td>A long string blah blah blah</td>
</tr>
</table>
</div>
Admittedly, this does not give you a "max" width of a cell per se, but it does allow some control that might work in-lieu of such an option. Not sure if it will work for your needs. I know it worked for our situation where we want the navigation side in the page to scale up and down to a point but for all the wide screens these days.
the percent should be relative to an absolute size,
try this :
table {
width:200px;
}
td {
width:65%;
border:1px solid black;
}
<table>
<tr>
<td>Testasdas 3123 1 dasd as da</td>
<td>A long string blah blah blah</td>
</tr>
</table>