A similar question, for example, Fixed height and changing the width for the title (HTML table) - except that I would like to ask: is there any other way to achieve this other than using instead of space? Basically, I would like to increase the text content in the cell of the data table in order to preserve the cell height, and instead increase the cell width.
The following is a minimal example of HTML that behaves the same way by changing the width of the browser (Firefox 43):
As you can see, regardless of the specification height/ max-heightin CSS, table fields tdincrease their height with decreasing width.
In this case, I would like the indicated height - and the corresponding width - of the cells to tdremain unchanged when the width of the browser changes, and which changes are instead the bottom scroll bar.
Is there any way to achieve this using CSS or even JS?
In response to @tgallimore questions:
- Can you specify a fixed table width? - no, I would like it to change the width depending on the content.
- Do you know how much you would like each cell to remain? - no, I would like it to have a fixed width, then if this is enough for two lines of text, they should be set for the optimal width (i.e. each line has approximately the same amount of text).
- ? - , ,
@Leothelion : 2em ( , 2.5em), , . :
* ( ), , , - 2.5em
* ( ), , , 2.5em ; , ( "", , , "".
, :
... , ; , .
HTML:
<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() {
}
$(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>