htmlcsshtml-table

How to give a fixed width to one row's table cell, with the other cell being responsive width, when other rows are all a single cell and responsive

I have the following table:-

<html>
<table style="table-layout: fixed; width: 100%; color: black; bgcolor='#e6f8d6';" border="1" cellpadding="4" cellspacing="4">
<tbody>
<tr>
<td style="background-color: rgb(153, 255, 255);" class="fontBody" valign="top"><p style="font-family: &quot;verdana&quot;; font-size: 18px; color: black; line-height: 18px; text-align: justify;" align="left"><code style="background-color: transparent;"><b>Some text here</b></span></td>
<td style="background-color: rgb(153, 255, 255);" class="fontBody" colspan="2" valign="top"><p style="font-family: &quot;verdana&quot;; font-size: 18px; color: black; line-height: 18px; text-align: justify;" align="left"><code style="background-color: transparent;"><b>Some other text here</b></span></td>
</tr>
<tr>
<td style="background-color: rgb(153, 255, 255);" class="fontBody" rowspan="2" valign="top"><p style="font-family: &quot;verdana&quot;; font-size: 18px; color: black; line-height: 18px; text-align: justify;" align="left"><code style="background-color: transparent;"><b>Some other text here</b></span></td>
<td style="background-color: rgb(153, 255, 255);" class="fontBody" valign="center" width="18%">
<div align="center"><p style="font-family: &quot;verdana&quot;; font-size: 18px; color: black; line-height: 18px; text-align: justify;" align="left"><code style="background-color: transparent;"><b>QUIT</b></code></p></div>
</td>
<td style="background-color: rgb(153, 255, 255);" class="fontBody" valign="center" width="34%">
<div style="background-color: rgb(153, 255, 255);" align="center"><p style="font-family: &quot;verdana&quot;; font-size: 18px; color: black; line-height: 18px; text-align: justify;" align="left"><code style="background-color: transparent;"><b>Responsive width column's text here</b></code></p></div>
</td>
</tr>
<tr>
<td style="background-color: rgb(153, 255, 255);" class="fontBody" colspan="2" valign="center">
<div align="center"><p style="font-family: &quot;verdana&quot;; font-size: 18px; color: black; line-height: 18px; text-align: justify;" align="left"><code style="background-color: transparent;"><b>Some other text here</b></code></div>
</td>
</tr>
<tr>
<td style="background-color: rgb(153, 255, 255);" class="fontBody" valign="top"><p style="font-family: &quot;verdana&quot;; font-size: 18px; color: black; line-height: 18px; text-align: justify;" align="left"><code style="background-color: transparent;"><b>Some other text here</b></span></td>
<td style="background-color: rgb(153, 255, 255);" class="fontBody" colspan="2" valign="top"><p style="font-family: &quot;verdana&quot;; font-size: 18px; color: black; line-height: 18px; text-align: justify;" align="left"><code style="background-color: transparent;"><b>Some other text here</b></span></td>
</tr>
</tbody>
</table>
</html>

This is how it looks now with the column with "QUIT" typed in it being the same width as the column on its right (the width of the column with "QUIT" typed in it is 18% - the full HTML of that line is <td style="background-color: rgb(153, 255, 255);" class="fontBody" valign="center" width="18%"> - while the width of the column to its right is 34% but at the moment, they are shown like as if both are of width 50% each):

|Some text here      | Some other text here                            |
|                    |QUIT(same width)|Responsive width column's text  |
|Some other text here|                                                 |       
|                    | Some other text here                            |
|Some other text here| Some other text here                            |

However, I want it to look like this, with the column for, "QUIT" fixed and all the rest to have a responsive width, possibly with a calculated column width that subtracts the fixed width of the column with "QUIT" typed in it (with CSS probably):-

| Some text here      | Some other text here                    |
|                     | QUIT|Responsive width column's text here|
| Some other text here|                                         |
|                     | Some other text here                    |
| Some other text here| Some other text here                    |

If I use the "flex" method, I cannot get the right border to separate the two columns completely, so that is not an option.

The following snippet works on laptops and desktops but not on small devices like mobile devices; the second <div> column gets pushed to the next line on being viewed on mobile devices (I think a nth child(2) CSS command will correct what I have in the following code snippet but I don't know how to do it. Please see Select second 2nd child div from within the parents div to understand what I mean):

.container3 {
    float: inline-block;
    width: 100%;
}
.fontbody1 {
    display: inline-block;
    border: solid 1px;
}
<table style="table-layout: fixed; width: 100%; color: black; bgcolor='#e6f8d6'; border='1'" cellpadding="4" cellspacing="4">
<tbody>
<tr>
<td style="background-color: rgb(153, 255, 255);" class="fontBody" valign="top"><p style="font-family: &quot;verdana&quot;; font-size: 18px; color: black; line-height: 18px; text-align: justify;" align="left"><code style="background-color: transparent;"><b>Some text here</b></span></td>
<td style="background-color: rgb(153, 255, 255);" class="fontBody" colspan="2" valign="top"><p style="font-family: &quot;verdana&quot;; font-size: 18px; color: black; line-height: 18px; text-align: justify;" align="left"><code style="background-color: transparent;"><b>Some other text here</b></span></td>
</tr>
<tr>
<td style="background-color: rgb(153, 255, 255);" class="fontBody" rowspan="2" valign="top"><p style="font-family: &quot;verdana&quot;; font-size: 18px; color: black; line-height: 18px; text-align: justify;" align="left"><code style="background-color: transparent;"><b>Some other text here</b></span></td>
<div class="container3" style="width: 100%;">
<td colspan=2 style="width: 100%;">
<div style="background-color: rgb(153, 255, 255);" class="fontBody1" valign="center" width="18%">
<div align="center"><p style="font-family: &quot;verdana&quot;; font-size: 18px; color: black; line-height: 18px; text-align: justify;" align="left"><code style="background-color: transparent;"><b>QUIT</b></code></p></div>
</div>
<div style="width: 94%; background-color: rgb(153, 255, 255);" class="fontBody1" valign="center" width="100%">
<div class="fontBody2">
<div style="background-color: rgb(153, 255, 255);" align="center"><p style="margin-left: 5px; font-family: &quot;verdana&quot;; font-size: 18px; color: black; line-height: 18px; text-align: justify;" align="left"><code style="background-color: transparent;"><b>Responsive width column's text here</b></code></p></div>
</div></div>
</div>
</td>
</tr>
<tr>
<td style="background-color: rgb(153, 255, 255);" class="fontBody" colspan="2" valign="center">
<div align="center"><p style="font-family: &quot;verdana&quot;; font-size: 18px; color: black; line-height: 18px; text-align: justify;" align="left"><code style="background-color: transparent;"><b>Some other text here</b></code></div>
</td>
</tr>
<tr>
<td style="background-color: rgb(153, 255, 255);" class="fontBody" valign="top"><p style="font-family: &quot;verdana&quot;; font-size: 18px; color: black; line-height: 18px; text-align: justify;" align="left"><code style="background-color: transparent;"><b>Some other text here</b></span></td>
<td style="background-color: rgb(153, 255, 255);" class="fontBody" colspan="2" valign="top"><p style="font-family: &quot;verdana&quot;; font-size: 18px; color: black; line-height: 18px; text-align: justify;" align="left"><code style="background-color: transparent;"><b>Some other text here</b></span></td>
</tr>
</tbody>
</table>

Solution

  • The following code snippet can be run correctly here and it works perfectly on my webpage also (it does what is asked in the question):-

    CSS followed by HTML

       
table {
  border-collapse: collapse;
}

tr {
  border-bottom: 1pt solid black;
}
    <table style="width: 100%; color: black; bgcolor="#e6f8d6"; border="1" cellpadding="4" cellspacing="4">
<tbody>
<tr>
<td style="background-color: rgb(153, 255, 255);" class="fontBody" valign="top"><p style="font-family: &quot;verdana&quot;; font-size: 18px; color: black; line-height: 18px; text-align: justify;" align="left"><code style="background-color: transparent;"><b>Some text here</b></code></td>
<td style="background-color: rgb(153, 255, 255);" class="fontBody" colspan="2" valign="top"><p style="font-family: &quot;verdana&quot;; font-size: 18px; color: black; line-height: 18px; text-align: justify;" align="left"><code style="background-color: transparent;"><b>Some other text here</b></code></td>
</tr>
<tr>
<td class="fontBody" style="background-color:rgb(153, 255, 255);vertical-align:top;">
<p style="color:black;font-family:&quot;verdana&quot;;font-size:18px;line-height:18px;text-align:justify;" align="left"><code style="background-color:transparent;"><b>Some other text here</b></code></p>
</td>
<td valign = "top" colspan="2" rowspan="2" style="background-color:rgb(153, 255, 255);">
<table style="margin-top: -4px; width: 100%;" class="ck-table-resized" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td style="background-color:rgb(153, 255, 255); width:42px;">
<p style="color:black;font-family:&quot;verdana&quot;;font-size:18px;line-height:18px;text-align:justify;" align="left"><code style="background-color:transparent;"><b>QUIT</b></code></p>
</td>
<td style="background-color:rgb(153, 255, 255); border-left: 1px solid black;">
<p style="margin-left: 5px; color:black;font-family:&quot;verdana&quot;;font-size:18px;line-height:18px;text-align:justify;" align="left"><code style="background-color:transparent;"><b>Responsive width column's text</b></code></p>
</td>
</tr>
</tbody>
</table>
<table style="margin-bottom:-5px; width: 100%;" class="ck-table-resized" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td valign="middle">
<p style="color:black;font-family:&quot;verdana&quot;;font-size:18px;line-height:18px;text-align:justify;" align="left"><code style="background-color:transparent;"><b>Some other text here</b></code></p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tbody>
<tr style="border-top: 1px solid black;">
<td class="fontBody" style="background-color:rgb(153, 255, 255);vertical-align:top;">
<p style="color:black;font-family:&quot;verdana&quot;;font-size:18px;line-height:18px;text-align:justify;" align="left"><code style="background-color:transparent;"><b>Some other text here</b></code></p>
</td>
<td class="fontBody" style="background-color:rgb(153, 255, 255);vertical-align:top;" colspan="2">
<p style="color:black;font-family:&quot;verdana&quot;;font-size:18px;line-height:18px;text-align:justify;" align="left"><code style="background-color:transparent;"><b>Some other text here</b></code></p>
</td>
</tr>
</tbody>
</table>