I currently have a table, with cells containing text. They are all at a current height of 100, but I want them to scale with browser size, so the page always fits on screen without the user scrolling.
<td width="200" height="100">
<h1 align="center"> <font color="AEDBFB">Blue</font></h1>
</td>
What can I put in place of the "100" to make it say 10% of the screens height?
One suggestion could be to use a combination of the CSS function calc and the CSS unit vh for viewport height:
<style>
td {
height: calc(100vh / 10);
}
</style>
Related
I need to display a table like this, but have the rows all be the same height even though the images in the table have varying sizes. The table needs to be responsive, so that everything resizes as the window size is changed.
The current code for each row is this:
<tr width="100%" height="10%" style="background-color:rgba(158,158,158,1); color: #FFFFFF">
<td width="25%" style="margin:0; padding:4" align="left">Wed <b>Sep 29</b></td>
<td width="100%" style="padding:4;display:flex; align-items:center; justify-content: center;" align="center"># <img src="https://upload.wikimedia.org/wikipedia/commons/8/81/Pittsburgh_Pirates_logo_2014.svg" width="15%" style="padding:4"> Pirates</td>
<td width="25%" style="padding:4;margin:0" align="right">6:35 PM</td>
</tr>
And the full code is here.
The problem with this is that the row sizes vary depending on the size of the logo. You can see that the logo for the Pirates is larger than the logo for the Cardinals, so the row height is taller for the Pirates.
I have succeeded in resizing the logo to be the same height as the row, based on this answer. This involved positioning the logo absolutely, though. The code for this is here (see the 7th row where I made the change). The problem with this approach is then that I can't figure out how to display the text (the # symbol and the team name) together inline with the team logo. Obviously I can't use display inline block because I've positioned the logo absolutely. So, my question is: how can I resize the team logo to be the height of the row while also displaying the logo inline with the text (centered)?
Scrap the abspos approach.
For the all the img logos, remove width='15%' attribute.
Add a vh height property that changes with the height of the window, e.g.
<tr>
...
<img src="pirates.svg" style="padding:4; height: 10vh;"> Pirates</td>
...
</tr>
<tr>
...
<img src="reds.svg" style="padding:4; height: 10vh;"> Pirates</td>
...
</tr>
If I have HTML like this:
<table>
<tr>
<td>
<img src="a.png">
</td>
<td>
<p>Sunday</p>
<p>Sunday</p>
<p>Sunday</p>
<p>Sunday</p>
<p>Sunday</p>
</td>
</tr>
</table>
The second column can have a variable number of paragraphs, so the height will be different. Whatever height the row is, I want the image to be that height. I tried this:
img {
height: 100%;
}
but it didn't seem to do anything. I would like to avoid changing the HTML if possible, can I do this with only CSS?
So the reason I wanted to increase the height of the image, was because the
second column can be much larger, which pushes the image way down with the
default table vertical centering. Instead of focusing on the image size, I
instead just moved the image to the top:
td {
vertical-align: top;
}
If someone has a solution to the original question I am still interested, but
this should do as a workaround.
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.
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;
}
I have a <table> with table-layout set to fixed, so that all explicit width/height definitions are respected no matter what. I'm trying to get a certain <td> to overflow, but even though I did the table-layout: fixed it doesn't work.
What should I do to make it work?
It won't work because the <td> will always have the size of an image
You can use height and width attributes. If the image size is 400x300, typing <img src="..." height="100" width="100" /> will show 100x100 image
If you want to crop an image use
<style>
#id{
background:url(...) no-repeat; /* you can use background-position css property here... */
height:100px;
width:100px;
</style>
<div id="image"></div>
Using table-layout: fixed, you can only guarantee the column widths, not heights. Also, the content of cells has no bearing on those widths. From w3schools:
The horizontal layout only depends on
the table's width and the width of the
columns, not the contents of the cells.
How much control do you need over the individual cells? Are you going for hidden overflow or one that can scroll? It's not clear from your question.