several tables all set to the identical TD width

Question

several tables all set to the identical TD width

Using a css sheet, I have formatted two tables. The first table is used for filter/sort selection, while the second table is a scrollable data table.


     div#scrollTableContainer {
     width: auto;
     margin: 20px; /* just for presentation purposes */
     border: 1px solid black;
     }

    #tHeadContainer {
        background: #CC3600;
        color: black;
        font-weight: bold;
    }
    #tBodyContainer {
        height: 750px;
        overflow-y: scroll;
    }
        td:first-child {
        min-width: 5%; /* EDIT */
        max-width: 5%;
        border-left:0;
    }

    td:first-child + td {
        min-width: 4%; 
        max-width: 4%;
    }

    td:first-child + td + td {
        min-width: 4%; 
        max-width: 4%;
    }

The alignment of columns in both tables is off, causing the Title/Header columns to not match the columns below. Additionally, the display differs between Chrome/IE and Firefox.

I am struggling to correct this issue, any assistance would be greatly appreciated.

html css html-table

Answer 1

Answer №1

div#scrollTableContainer {
  width: auto;
  margin: 20px;
  /* just for presentation purposes */
}

#tHeadContainer {
  background: #CC3600;
  color: black;
  font-weight: bold;
}

#tBodyContainer {
  height: 750px;
}

th:first-child, td:first-child {
  min-width: 15%;
  max-width: 15%;
  width: 15%;
}

td:first-child+td {
  min-width: 4%;
  max-width: 4%;
}

td:first-child+td+td {
  min-width: 4%;
  max-width: 4%;
}

<div id="scrollTableContainer">
  <div id="tHeadContainer">
    <table border="1" align="center" width="100%" cellpadding="0" cellspacing="0">

      <tr>
        <th bgcolor="<%=bgc0%>">USED</th>
        <th bgcolor="<%=bgc0%>">STATUS</th>
      </tr>
    </table>
  </div>

  <div id="tBodyContainer">
    <table border="1" align="center" width="100%" cellpadding="0" cellspacing="0">
      <td> stuff </td>
      <td> More stuff </td>
    </table>
  </div>
</div>

Answer 2

div#scrollTableContainer {
  width: auto;
  margin: 20px;
  /* just for presentation purposes */
}

#tHeadContainer {
  background: #CC3600;
  color: black;
  font-weight: bold;
}

#tBodyContainer {
  height: 750px;
}

th:first-child, td:first-child {
  min-width: 15%;
  max-width: 15%;
  width: 15%;
}

td:first-child+td {
  min-width: 4%;
  max-width: 4%;
}

td:first-child+td+td {
  min-width: 4%;
  max-width: 4%;
}

<div id="scrollTableContainer">
  <div id="tHeadContainer">
    <table border="1" align="center" width="100%" cellpadding="0" cellspacing="0">

      <tr>
        <th bgcolor="<%=bgc0%>">USED</th>
        <th bgcolor="<%=bgc0%>">STATUS</th>
      </tr>
    </table>
  </div>

  <div id="tBodyContainer">
    <table border="1" align="center" width="100%" cellpadding="0" cellspacing="0">
      <td> stuff </td>
      <td> More stuff </td>
    </table>
  </div>
</div>

Answer 3

Answer №2

If you're looking to align the columns of both tables vertically right, I have a solution for you. I updated your CSS and noticed that you missed the "tr" in the second table.

Check out the updated code on this JSFiddle link.

#scrollTableContainer {
 width: auto;
 margin: 20px; /* added for presentation purposes */
 border: 1px solid black;
 }

#tHeadContainer {
    background: #CC3600;
    color: black;
    font-weight: bold;
}

#tHeadContainer th{
 width:50%; 
}

#tBodyContainer {
    height: 750px;
    overflow-y: auto;
}

.TableData{
   width:100%;
 }

.TableData td{
 width:50%; 
}

Answer 4

If you're looking to align the columns of both tables vertically right, I have a solution for you. I updated your CSS and noticed that you missed the "tr" in the second table.

Check out the updated code on this JSFiddle link.

#scrollTableContainer {
 width: auto;
 margin: 20px; /* added for presentation purposes */
 border: 1px solid black;
 }

#tHeadContainer {
    background: #CC3600;
    color: black;
    font-weight: bold;
}

#tHeadContainer th{
 width:50%; 
}

#tBodyContainer {
    height: 750px;
    overflow-y: auto;
}

.TableData{
   width:100%;
 }

.TableData td{
 width:50%; 
}

Answer 5

Answer №3

Try this out! You might notice a slight margin due to the scroll bar in the second table, but you can adjust it by inserting a tab into the first array with the scrollbar's width. I hope this solution works for you.

#scrollTableContainer {
width : 96%;
margin : auto;
border : 1px solid #ccc;
}

#tHeadContainer {
background-color : green;
width : 100%;
}

#tBodyContainer {
width : 100%;
height : 750px;
overflow-y : scroll;
}

#tHeadContainer table, #tBodyContainer table {
border-collapse : collapse;
width : 100%;
}

td, th {
border : 1px solid black;
}

tr {
width : 100%;
}

th:first-child, td:first-child {
min-width : 15%;
max-width : 15%;
width : 15%; /* Adjust this value to change the width of the first column */
}

<div id="scrollTableContainer">

<div id="tHeadContainer">
<table>
<tr>
<th>USED</th>
<th>STATUS</th>
</tr>
</table>
</div>

<div id="tBodyContainer">
<table>
<tr>
<td>Stuff</td>
<td>Some other stuff</td>
</tr>
</table>
</div>

</div>

Answer 6

Try this out! You might notice a slight margin due to the scroll bar in the second table, but you can adjust it by inserting a tab into the first array with the scrollbar's width. I hope this solution works for you.

#scrollTableContainer {
width : 96%;
margin : auto;
border : 1px solid #ccc;
}

#tHeadContainer {
background-color : green;
width : 100%;
}

#tBodyContainer {
width : 100%;
height : 750px;
overflow-y : scroll;
}

#tHeadContainer table, #tBodyContainer table {
border-collapse : collapse;
width : 100%;
}

td, th {
border : 1px solid black;
}

tr {
width : 100%;
}

th:first-child, td:first-child {
min-width : 15%;
max-width : 15%;
width : 15%; /* Adjust this value to change the width of the first column */
}

<div id="scrollTableContainer">

<div id="tHeadContainer">
<table>
<tr>
<th>USED</th>
<th>STATUS</th>
</tr>
</table>
</div>

<div id="tBodyContainer">
<table>
<tr>
<td>Stuff</td>
<td>Some other stuff</td>
</tr>
</table>
</div>

</div>

several tables all set to the identical TD width

Answer №1

Answer №2

Answer №3

Similar questions

What impact does including a parent View Tag have on the styling in React Native?

excess white space appears in the mobile version

Bootstrap 4 - DropDown option - Element is positioned above the navigation bar

Designing a toggle button interface with Material UI

Opacity filter malfunctioning

What steps can I take to ensure that my logos remain visible even when I close the menu and resize the window?

Is there a way to display additional data alongside form submissions that do not directly correlate with the form fields?

Putting Images Next to Each Other - Arranging Them to Be Responsive

Tips for inserting multiple numbers from a single row into separate options within a SELECT statement

Having trouble getting JavaScript to replace tags in HTML

Is there a way to include a minimize button on a MaterialUi Table enclosed in a Paper component for easy table reduction?

When using Jsoup, make sure to nest the <div> tag within an <a>

I seem to be having some trouble with my navigation roll-over menu bar, as

Background image spacing

Submit your information discreetly

Enhance your navigation bar with hover styles in React Router Dom v6

adjust the size of a form field to match the background image dimensions

Preventing Canvas Image Disappearance with JavaScript's onload Event

Place the Div directly above a distinct Div

Auto-selecting the first item in a CSS menu when the switcher is tapped on mobile devices