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;
}
}
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;
}
My table has a nested table for one of its rows. I would like both tables to take up 100% of the parent element width. How do I do that?
Demo
HTML
<div class="container">
<table>
<tr class="row">
row 1
</tr>
<tr class="requestDetails row">
<td>
<tr class="requestDetailsHeading">
<td>Headingname</td>
</tr>
<tr class="requestRow">
<td>name</td>
<td>date</td>
<td>age</td>
</tr>
</td>
</tr>
<tr class="row">
<td>gg</td>
<td>dd</td>
<td>ee</td>
</tr>
</table>
Drawing on the other answers, in a roundabout way, yes they do have an element of correctness, unfortunately none of them has the full story.
As Justinas points out, you're not nesting tables, what you're nesting are rows. While row nesting will indeed work, it is actually now not supported under the new HTML5 schemes.
This means that trying to do what you're doing, will simply not validate, and worse will refuse to render correctly on mobile devices.
Working with your existing code:
<div class="container">
<table>
<tr class="row">
row 1
</tr>
<tr class="requestDetails row">
<td>
<tr class="requestDetailsHeading">
<td>Headingname</td>
</tr>
<tr class="requestRow">
<td>name</td>
<td>date</td>
<td>age</td>
</tr>
</td>
</tr>
<tr class="row">
<td>gg</td>
<td>dd</td>
<td>ee</td>
</tr>
</table>
</div>
You can achieve what you're trying to do by adding a width of 100% to the table's style as others have already pointed out, and by adding a width:100% to requestDetailsHeading class.
However, I'm going to take a guess here, and looking at your other class names (specifically container and row) I suspect you might actually be using the Bootstrap CSS framework. If you're not then perhaps you might want to consider doing so, as it will make the task you're trying to do much easier and you'll have less fiddling about to do.
You can download the various CSS files from
http://getbootstrap.com/
And once you have a page set-up with BS in place, you can get the exact effect you want by using the following HTML
<div class="container">
<table class="table">
<tr> <!-- NOTE: Don't use the 'row' class here as BS3 has another use for that -->
<td colspan="3">
row 1
</td>
</tr>
<tr class="requestDetailsHeading">
<td colspan="3">HeadingName</td>
</tr>
<tr class="requestRow">
<td>Name</td>
<td>Date</td>
<td>Age</td>
</tr>
<tr class="requestData">
<td>gg</td>
<td>dd</td>
<td>ee</td>
</tr>
</table>
</div>
Even without bootstrap added however, you'll notice that I've simplified the HTML.
To get the effect you're looking for of a 100% row, above each row of data, you don't need to nest things the way you did, you simply just need to tell the td element how many columns it has to span, and as long as that is equal to the rest of the table, you'll end up with a 100% width header across separate columns. If you decide to use Bootstrap, then BS will take care of giving you a 100% table width, otherwise as others have mentioned simply add a width of "100%" to a class that controls the table itself.
Additional (But not required to solve your problem)
If you decide to use Bootstrap as your CSS framework, there is another way that you can achieve what you're trying to achieve, and that's to use the BS3 grid system.
Using 'container' s, 'row' s and 'col-md-xx' style classes, you could very easily do something like the following:
<div class="container">
<div class="row">
<div class="col-md-12">
Row Header Text Goes Here
</div>
</div>
<div class="row">
<div class="col-md-4">Name</div>
<div class="col-md-4">Date</div>
<div class="col-md-4">Age</div>
</div>
<div class="row">
<div class="col-md-4">gg</div>
<div class="col-md-4">dd</div>
<div class="col-md-4">ee</div>
</div>
</div>
Because of the way Bootstrap works, the container will automatically take up 100% of the center column (approx 1024 pixels) and each of your rows will take up the appropriate space in the 12 column grid that's available by default.
Your data rows are set to column widths of 4 grids, as 3 times 4 is 12, and it's easy to repeat the 'div' sections as needed in order to produce as many rows as needed.
Finally, if you use 'container-fluid' rather than 'container' in your outermost div, then your layout will span the entire width of the visible page.
The best part about going the bootstrap route however, is that everything you do using it is automatically responsive, and so will adapt and resize automatically for mobile and desktop as needed, especially if you start using a mixture of 'col-xx-yy' column types, where xx represents the device target size, and yy the number of grid columns you wish to consume.
Fiddle
table{
background-color:white;
width:100%;
}
You don't have nested tables. You have tr > td > tr > td that I think is not valid.
Also, first row don't have td element.
Simply apply width: 100% to all tables:
table {
background-color: white;
width: 100%;
}
.requestDetails {
background-color: red;
}
.container {
width: 600px;
background-color: green;
}
.row {
width: 100%;
background-color: blue;
}
<div class="container">
<table>
<tr class="row">
row 1
</tr>
<tr class="requestDetails row">
<td>
<tr class="requestDetailsHeading">
<td>Headingname</td>
</tr>
<tr class="requestRow">
<td>name</td>
<td>date</td>
<td>age</td>
</tr>
</td>
</tr>
<tr class="row">
<td>gg</td>
<td>dd</td>
<td>ee</td>
</tr>
</table>
</div>
Just add width: 100%; to the table in CSS.
Updated jsFiddle
Readup: CSS width | MDN
Just update your css like below:
.container table{
background-color:white;
width:100%;
}
If the width attribute is not set, table takes up the space it needs to display the table data. so you have to define the width of table.
so just define the width for table in CSS.
.row, table{
width:100%;
background-color:blue;
}
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;
}
So. I am creating a small site to test my capabilities.
In my site i have a page that in Firefox looks like this:
The additional files and additional actions buttons are inside a table. and each button is inside a <td> which are set to appear one under another with CSS using display:block; on the <td> element.
The problem is that when i open the page in IE9 or lower the td's are shown inline like this:
Because of this the responsiveness of the page is broken and resizing the viewport will move the page content below the left menu...
Here is the HTML of the tables:
<table class="buttons">
<tbody>
<tr>
<th colspan="2">Additional files:</th>
</tr>
<tr>
<td>
<a id="cv" href="">Curriculum Vitae</a>
</td>
<td>
<a id="cover" href="">Cover Letter</a>
</td>
</tr>
</tbody>
</table>
<table class="buttons">
<tbody>
<tr>
<th colspan="3">Additional actions:</th>
</tr>
<tr>
<td>
<a class="approve" href="">Denie</a>
<span style="display: none;">31</span>
</td>
<td>
Reply
</td>
<td>
Delete
</td>
</tr>
</tbody>
</table>
And this is the CSS:
.buttons {
float: left;
margin: 20px auto 0;
width: 50%;
}
.buttons td {
display: block;
width: 100%;
}
Can anyone suggest me a solution?
Thank you in advance!
You need to set table-layout: fixed; to your table and if still not working add a div inside td and manage the css which might work.
The real answer here is that you shouldn't be using <table> tags for this. What you have there is not a table, and so <table> is not semantically correct.
It's even worse because you're then overriding the default table layout by using display:block, which moves us even further away from wanting to use a <table>.
By using tables like this, and forcing the browser to restructure it with CSS, you're making it quite confusing for the browser. Particularly with the colspan attributes and then three columns of buttons, when you actually want them all in one column. Its easy to see why you'd get inconsistent behaviour with this, especially with older browsers.
So the solution here is to swap your <table> layout for a set of <div> elements. This will be semantically correct, and it will be easier to get it styled consistently. And you'll need less markup as well.
If you really want to carry on using tables for this layout, then you need to re-style all the elements -- display:block on the tr elements doesn't affect the display property of the table, tbody and tr elements, and these would also need to changed. But really, I would avoid that. Just use divs; it'll make things much cleaner.
I have a table, which extends off the screen to the right (it has fixed with and this width is larger than screen width). Browser automatically creates scroll bar at the bottom. How can I instruct browser, while displaying this table in "invisible" area to the right, not to create a scroll bar? The purpose of this exercise that this table will be scrolled left using Javascript, showing its contents to the right which is initially off the screen.
If I set "overflow:hidden" for the "body", all other content becomes unscrollable in case it does not fit to the screen (e.g. in 1024 browser, as content is optimized for 1280). I need only this table (which is inside two DIVs) not to create browser scroll bar...
Code looks like the following way
<div style="position:relative;overflow:hidden;width:1500px">
<div style="float:left">
<table style="table-layout:fixed;width:1500px">
<tr>
<td style="width:300px">
aaa
</td>
<td style="width:300px">
bbb
</td>
<td style="width:300px">
ccc
</td>
<td style="width:300px">
ddd
</td>
<td style="width:300px">
eee
</td>
</tr>
</table>
</div>
</div>
Add the following CSS rule:
body
{
overflow-x:hidden;
}
EDIT: After seeing your comments, and that the table is within a div I suggest the following. Lets say your markup is:
<div class="tablecontainer">
<table />
</div>
Use the following CSS rule:
div.tablecontainer
{
overflow-x:hidden;
}
Try this
<body style="overflow-x:hidden;">
or use any CSS class to add this property into your body tag.
Put an "overflow-x" styling to it. You can make the overflow hidden or give the div containing the table a horizontal scroll.
Horizontal scroll for overflow
<div class="col-12" style="overflow-x:scroll;">
Hidden overflow
<div class="col-12" style="overflow-x:hidden;">