Menu
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:
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>
894
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/
132
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.
45
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
