A similar question like Fixed Height and Changing Width for Header (HTML Table) - except I'd like to ask: is there a different way to achieve this, other than using instead of space? Basically, I'd like increasing text content in the table data cell to keep the cell height fixed, and instead increase the cell width..
Below is a minimal HTML example, which behaves like this upon changing the browser (Firefox 43) width:
As you can see, regardless of height/max-height specification in CSS, the table td fields increase their height, while decreasing the width.
What I'd like to happen is in this case, the specified height - and the corresponding width - of td cells remains the same upon change of browser width, and what changes instead is the bottom scrollbar.
Is there any way I could achieve this with CSS, or even JS?
In response to #tgallimore's questions:
Are you able to give a fixed width to the table? - no, I'd like it to resize width depending on content
Do you know how wide you would like each cell to remain? - no, I'd like it to have a fixed width, then if it's enough for two rows of text, these should be adjusted for optimal width (i.e. each row has approximately the same amount of text)
Can this width be given to each cell? - no, cells would have differing text contents, as in the example
In response to #Leothelion's post: I wanted to specify a fixed height of 2em (or let's say, 2.5em), is because I'd expect it to allow enough vertical space for max two lines of text. So what I want to achieve is:
* If the text in the cell is short (i.e. one word), then there's no line breaking, text is in single line, and cell height is 2.5em
* If the text in the cell is long (a whole sentence), then I'd want the layout to figure out that the in a cell height of 2.5em it can fit max two lines of text; thereafter it would try to break the text such that there are approximately the same amount of characters in both lines (so now we have a "paragraph"; and finally it would set the width of the cell to the width of this newly line-broken "paragraph".
In other words, I would like this layout:
... regardless of how I scale the browser width; if the browser width is too small, then only the horizontal scrollbar adjusts.
The sample HTML code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="../jquery-1.12.3.min.js"></script>
<style type="text/css">
.mytbl,
.mytbl tr th,
.mytbl tr td {
border-style: solid;
border-color: #000;
border-spacing: 0;
border-collapse: collapse;
padding: 4px;
border-width: 1px;
font: 12px helvetica,arial,sans-serif;
}
.mytbl tr td {
height: 2em;
max-height: 2em;
}
.mtytblwrap {
border-width: 1px;
border-color: #000;
padding: 4px;
overflow: auto;
overflow-y: hidden;
}
</style>
<script type="text/javascript">
ondocready = function() {
// placeholder - nothing for now...
}
$(document).ready(ondocready);
</script>
</head>
<body>
<h1>Hello World!</h1>
<div id="wrapper1" class="mtytblwrap">
<table id="table1" class="mytbl">
<thead>
<tr>
<th> Dendrologist </th>
<th> Iciness </th>
<th> JoyfulDistortion </th>
<th> Suburbicarian </th>
<th> Ecballium </th>
<th> AbulicNonviolence </th>
<th> GrowlerTheocracy </th>
<th> Necessitattion </th>
</tr>
</thead>
<tbody>
<tr>
<td> A1 </td>
<td> Just testing some longer content here, so long that it might not fit on a single line </td>
<td> Molybdenum </td>
<td> D1 </td>
<td> Scanty Distensibility </td>
<td> Arithmetical </td>
<td> G1 </td>
<td> Hypallelomorph </td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Are you able to give a fixed width to the table?
Do you know how wide you would like each cell to remain? Can this width be given to each cell?
A table-cell will ALWAYS expand its height if it's content doesn't fit, regardless of wether you set a height or not (so a height in this case would work as a min-height).
Also, you will probably need to use .mytbl { table-layout: fixed; }. This tells the table to use the widths that you have defined, rather than try to fix it's content in each cell. See this for more info: https://css-tricks.com/fixing-tables-long-strings/
What you need is Media query
See my UPDATED FIDDLE
On different resolution(i just took 1, adjust according to your need ), fixed the width and table-layout: fixed; and you will get your solution.
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'm trying to create this table layout. Basically the orange 18 you see in the grid means 18% usage between 11am and 12pm on Tuesday. So that's why the hours along the top are best on the edges of the table cell, not in the middle of the cell. That way it's showing the data representing usage over a one hour time range.
I have basically applied a basic hack and right aligned the hours along the top so they kinda look like they're inbetween the cells. This isn't perfect as you can see.
What I want to do is actually have the hours along the top centered nicely between the data cells. I think I could do it with a fixed size column widths, but the table needs to stretch to 100% of the page width and the column widths a percentage. Then it's scalable down to a smaller browser.
Is there a way to do this in HTML and CSS?
To have the first row truly centered between the bottom cells with a single table you can use colspan + widths in percentages without using positioning. That way it will be fluid, it will work with any font, and it won't get screwed when you use 2 digit numbers.
HTML:
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td> </td>
<th colspan="2">1</th>
<th colspan="2">1</th>
<th colspan="2">1</th>
<th colspan="2">1</th>
<th colspan="2">1</th>
<td> </td>
</tr>
<tr>
<td colspan="2">0</td>
<td colspan="2">0</td>
<td colspan="2">0</td>
<td colspan="2">0</td>
<td colspan="2">0</td>
<td colspan="2">0</td>
</tr>
</tbody>
</table>
CSS:
table {
text-align: center;
width: 70%;
}
table td {
width:8.33%; // 100% divided by (double the number of bottom cells)
}
table th {
width:16.66%; // 200% divided by (double the number of bottom cells)
}
table td[colspan="2"] {
background:yellow;
}
table td,
table th {
outline:1px solid tan;
}
Demo: http://jsfiddle.net/G7KZe/
You could use position: relative; to place your month numbers to be where you want but it's tricky because table cells often behave weirdly with CSS positioning. And the exact positioning can depend on the font used.
I've come up with a solution that requires 2 tables. The idea is to have one table for the headings, one table for the content. The trick is to have 1 cell less in the headings.
Live example: http://jsfiddle.net/w6TnE/
As you can see, the month numbers are perfectly aligned with the borders. But keep in mind that this setup requires a fixed width, in this case, 60px:
td, th{ border:1px solid #ccc; padding:5px 0; text-align:center; width:60px;}
I just added some additional styling to make it clear.
You can use an absolutely positioned element inside a relatively positioned element to get the effect you want. The idea is to style the <th> elements with position: relative and then style the hour numbers themselves in an element with position: absolute. You can then position the numbers anywhere you want in relation to the cell.
Here is an example jsfiddle. To adjust the position of the numbers you may want to use a pixel value instead of a percentage for the right property in the th > span block.
For more information, you might want to read about the different positioning methods.
table td{ text-align:center;}
This will align the text of each cell to the center.
You could always wrap each of the table heading text in like a <div> tag and use the css position:relative and left:2px or whatever number of pixels to make it look good.
example
<table>
<tr>
<th style="text-align:right;"><div style="position:relative;left:2px;">1</div></th>
</tr>
</table>
i want a table to render with minimum width according to its content, but IE7 insists on expanding it to 100% width.
The following little snippet works fine in Firefox and IE8, but not in IE7:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
table { table-layout: fixed }
td { padding: 0 10px; border: 1px solid blue;}
</style>
</head>
<body>
<table>
<tr>
<td>Column with variable width</td>
<td style="width: 100px;">Column 2</td>
<td style="width: 100px;">Column 3</td>
</tr>
</table>
</body>
</html>
I have a table with table-layout: fixed.
I have specified the width of all cells except the first one.
In the first column, i want the browser to determine the width based on the content
As I don't know the width of the first column, I cannot (and do not want to) specify the width of the table.
Now, the problem in IE7 is that the table is rendered to 100% width. So the first col has not the minimum width that is required to display its content but takes up all the space to make the table 100% width.
Here is what i found out so far:
when i remove "table-layout: fixed" from the table, the table will not expand to 100%. Unfortunatly, that's not an option for me.
when i set the table-width to a very small size (like e.g. 10px), the first col will not be expanded to the minimum required width, but will disappear entirerly.
i tried to set "display: inline;" for the table, but that has no effects on the width.
Any ideas?
Thanks in advace,
Pitter
If only purpose of table-layout: fixed is to fix widths of cells, then you can add DIVs with desired width inside TD and get rid of table-layout: fixed for table.
The CSS specification on table-layout: fixed:
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.
So you should definitely try to achieve whatever you need table-layout: fixed for by some other means.