I have used the following CSS style to ensure my content in a table is kept within a specific size:
div.tablewrapper {
height: 290mm;
width: 200mm;
overflow-y:hidden;
overflow-x:hidden;
}
And below is the html table codes I am using:
<div class="tablewrapper">
<table width="200mm" height="290mm" border="1">
<tr width="200mm" height="290mm">
<td>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</td>
</tr>
</table>
</div>
From the above codes, I am trying to constraint a long text inside a div element which works.
The main problem is, how do I force the content to flow downwards instead of disappearing away into the constrainted areas ?
Set the table's style to have table-layout: fixed, and consider using word-break: break-all
Related
My situation: I'm making a table for mobile users, and I have a html table.
How do I apply CSS so that
All cells (td) are forced to not break words, but break at white-spaces only. (white-space: nowrap; is not an acceptable solution.)
All columns should expand in width (ignoring width limit, idc if it overflow, because my will make it scrollable) to ensure that there's no word-break, but only breaking at whitespaces.
<div style="overflow: scroll;">
<table>
<thead>
<!-- some header -->
</thead>
<tbody>
<tr>
<td>Some text</td>
<td>Some evenlongertext with words in multiple_lines</td>
<td>Some supersupersuperlong text.</td>
</tr>
<!-- etc., more rows. -->
</tbody>
</table>
</div>
EDIT 1:
My table currently looks like this on a mobile screen, for reference:
I want it to expand in width to make sure there are no word breaking, at the cost of overflowing horizontally.
EDIT 2:
Clarification on word wrapping:
I want it to grow, but not to the point that the entire string does not break. e.g. for the string "Some evenlongertext with words in multiple_lines",
it doesn't have to show like
Some evenlongertext with words in multiple_lines
, but it can show like
Some
evenlongertext
with words in
multiple_lines
where there is no break within each word
Edit 3:
It looks like the overhead stylesheet for my entire site (which I can't change) has set word-break: break-word;
You could use each cell as a div, if you use flex-box, it will automatically be responsive, and that is good for mobile apps. Just create another div around all of the cells (divs), and give that div the class wrapper or container.
This will be your css
wrapper {
display: flex;
justify-content: center;
}
.cell {
height: 100px;
width: 100px;
}
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).
Imagine you have a complex structure with 2 elements in a table cell. Just like that:
<table>
<tbody>
<tr>
<td>
<div class="wideDiv">Here goes some very wide content</div>
<div class="anotherDiv">This content doesn't have to be wide.</div>
</td>
</tr>
</tbody>
</table>
.wideDiv has content that may be wider than the page itself. In this case it forces .anotherDiv to get all this space too. I'd want to force .wideDiv to be not wider than the page itself (using scroll, of course), it works this way if we don't wrap divs with table. Fixed size is an obvious solution, but is there any other way?
Here's working example:
http://jsfiddle.net/GbEvT/2/
Add
.anotherDiv {
width: 100vw;
}
Here's the update: http://jsfiddle.net/GbEvT/4/
It tells anotherDiv to take 100% of the screen, not more.
Here, you have another solution:
table {
width: 100%;
table-layout: fixed;
}
the best way to show you what I want to achive is showing the picture:
I tried to position nested tables to each side of row. I looked for solution but didn't find anything interesting.
When I played with "position: absolute;" i did more damage than good results. Is it possible to do it like in the picture?
EDIT: It's not my project and I don't have any influence on design. It's based on table and I have to deal with it :)
you could float it.. or you could probably just have that cell holding it set to text-align: right depends on what else is in it the cell whether you need just the nested table to the right.. (that doesn't work in all browsers)
<table width="100%" border="1">
<tr>
<td>
<table style="background: red;">
<tr>
<td>left</td>
</tr>
</table>
</td>
<td>
<table style="background: green; float: right">
<tr>
<td>right</td>
</tr>
</table>
</td>
</tr>
</table>
If you are able to use divs instead of table tags to contain the two, have a left and right div instead of your two TD tags like so:
<div class="left"><table></table></div>
<div class="right"><table></table></div>
Then just add some CSS
<style type="text/css">
.left, .right {
width:300px;
}
.left {
float:left;
}
.left table, .right table {
width:63%;
}
.right table {
float:right;
}
</style>
I would go that route as supposed to using tables. If it doesnt work though, you might need to change the display type of the td tags to block. That said, I haven't tried that before and I'm not sure how well it would work.
If you don't have any more content in the containing <td> you could float it to the right;
/* select nested tables in td's that have a preceding td sibling, effectively the second column */
table td + td table {
float: right;
}
jsfiddle demo
Keep these notes in mind:
Absolute positioning and floated children cause Great Collapse. So, your cell could get unpredictable for you.
Nested tables are not common these days. Maybe your design is wrong. Have you considered other designs. Maybe div elements inside a table cell, nesting a table inside a list item?
Table is a block level element in nature. That is, a table tries to fill its parent's width by default. So, to get to your result, you need to specify width for them.
My suggestion, keep far from tables. Use CSS positioning.
I have a <table> inside a <div> tag, which doesn't want to span as long as it needs to be. I need to specify a width in px for the <table> to span and thus cause the <div> container it is inside to scroll. Otherwise, the <table> just spans to a width of 100%, i.e. the width of the <div>.
My example is as follows:
<div style="width:880px; overflow:scroll;">
<table> // I need to explicitly specify a width for it, otherwise it just span 100% which is incorrect
<tr><td></td><td></td><td></td></tr>
</table>
</div>
I have specified for all the <td> tags a width inside my CSS.
I don't understand why the <table> can't determine it's own width or just respect the widths of all the <td> tags.
Try setting white-space: nowrap; on the td in your table and dump a lot of text inside each td you will start seeing a scroll bar on your div.
Are you sure there isn't any unintended CSS being applied to the table? By default the table only expands to accommodate its columns.
<div style="width:880px; overflow:scroll; background-color: green;">
<table style="background-color: red;">
<tr>
<td>one</td>
<td>two</td>
</tr>
</table>
</div>
Using this code, you can see the red table is only as big as its columns in relation to the green div as long as no other CSS is involved.
Use a tool like Firebug or IE's Developer Tools (F12) to see which styles are actually being applied to the table element.
See the example here.