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;
}
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;
}
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.
I am struggling to keep a table within a table to stay at a set width and in mobile to have a horizontal scroll.
That way nothing gets squished and i can maintain readability. I am attempting to use pure CSS before resorting to javascript/jQuery.
Current example:
(LINK HAS BEEN REMOVED)
The DOM structure i currently have:
<table>
<tr>
<td>Vessel name and $</td>
<td>
<div class="container">
<table>
<tr>
<td>Sold</td>
<td>Sold</td>
<td>Available</td>
<td>Sold</td>
</tr>
</table>
</div>
</td>
<td>Proceed button</td>
</tr>
</table>
The table in the container i want to keep at a set width e.g 500px and when we go into mobile i'd like to be able to have a horizontal overflow so users can swipe/scroll through the availability for that particular vessel.
I have a development page which illustrates what i'd like to achieve, it also contains CSS that i've used so far (note, still tinkering).
(LINK HAS BEEN REMEOVED)
A possibility would be media queries, to make the div scrollable on small resolutions.
#media(max-width: 767px) {
.container {
overflow-x: scroll;
}
}
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
I have a table with two columns. The first (which contains a menu) should have a
fixed width, while the second (containing some page content) can vary in width. The table should overflow the window (which it doesn't by default), because otherwise the browser reduces the width of the menu column if the content is very broad. But I cannot define a fixed width for the table (causing it to overflow) because I don't know the width of the content.
Overflow:scroll
does not seem to work with tables. I would be thankful for workarounds/solutions.
<table class="rootTableContent">
<tr>
<td id="rootTableMenu">
</td>
<td id="rootTableContent">
</td>
</tr>
The solution to this problem is to use proper CSS (Divs/Spans, etc) to layout your website as opposed to tables. I'm all for using tables to display tabular data and you'll see me arguing for them in places that they're valid, but this is not one of them.
This is easily done with something like this:
<div style="float:left; width: 150px">
Navigation Code Here
</div>
<div style="float: left">
Other Content Here
</div>
<div style="clear:both"></div>
Obviously, I'm oversimplifying this solution, you're going to have more specific code to deal with your layout (need more detail to help more specifically) But, it's important to use the right tools for the job.
As others have stated, please don't use <table> layouts. It's old, clunky, and confuses screen readers and other accessibility software.
If you absolutely insist on using your method, you can try this:
Live Demo
<style type="text/css">
div.wrap {
overflow-y: auto;
width: 75%;
}
div.wrap table {
border: 1px solid #000;
width: 100%;
}
div.wrap table td {
padding: 20px;
}
</style>
<div class="wrap">
<table class="rootTableContent">
<tr>
<td id="rootTableMenu">rootTableMenu</td>
<td id="rootTableContent">rootTableContent</td>
</tr>
</table>
</div>