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>
table-layout: fixed;and the link you sent. Cheers! – Orbadiah