How to make html table take up 100% of parent element width? - html

Question

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>

Answer 1

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.

Answer 2

Fiddle
table{
background-color:white;
width:100%;
}

Answer 3

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>

Answer 4

Just add width: 100%; to the table in CSS.
Updated jsFiddle
Readup: CSS width | MDN

Answer 5

Just update your css like below:
.container table{
background-color:white;
width:100%;
}

Answer 6

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;
}