Taking inspiration from the previous responses, it seems that there is some validity in their points, but none of them provide a complete solution.
Justinas made a crucial observation that you are not nesting tables, but rows instead. While nesting rows may work, it is no longer supported under HTML5 standards.
This implies that your current approach will not pass validation and may not display correctly on mobile devices.
To address this issue within 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>
To achieve your desired layout, you can set the table's style width to 100% as suggested by others and add a width:100% to the requestDetailsHeading class.
However, judging by your class names such as container and row, it appears that you might be using the Bootstrap CSS framework. If not, consider implementing Bootstrap for an easier solution with less customization required.
You can obtain the necessary CSS files from
http://getbootstrap.com/
Once Bootstrap is integrated into your page, you can achieve the desired effect using the following HTML structure:
<div class="container">
<table class="table">
<tr> <!-- Avoid using 'row' class due to conflicting usage in BS3 -->
<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>
Simplifying the HTML structure, even without Bootstrap, provides a clearer representation. Specify the column span for each td element to achieve a 100% width header across different columns. When utilizing Bootstrap, the framework takes care of maintaining a 100% table width, or manually assign a width of "100%" to a relevant class controlling the table.
Additional Insights (Optional)
If opting for Bootstrap, leverage the BS3 grid system for a streamlined approach to achieving your goal.
By utilizing 'container', 'row', and 'col-md-xx' classes, you can easily create the following layout:
<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>
Bootstrap automatically adjusts responsiveness based on the device screen size for seamless viewing across various platforms. It offers the flexibility to define column widths in relation to the available grid system, ensuring a well-structured layout.
Consider using 'container-fluid' for full-width layouts extending to the edges of the page. By incorporating Bootstrap, your design becomes inherently adaptable and user-friendly on different devices without additional effort.