Question 42735 in Html Question posted in
Some basic documentation can be found here.

Table doesn't format as expected – Html

I have a table that displays as I wish, however I added a button below so the user can expand and show a secondary table. However, this second table does not display like the first one and I wanted to know why that is. The second table displays to the left with no spacing between the boxes as expected

First table (displays correctly)

<div id="expenses-table">
  <table class="table">
    <tr>
      <th>Date</th>
      <th>Supplier</th>
      <th>Amount</th>
      <th>Reason</th>
    </tr>
    <tr>
      <th><input type="text"></th>
      <th><input type="text"></th>
      <th><input type="text"></th>
      <th><input type="text"></th>
    </tr>
  </table>
  
  <br>
  <br>

Second table in question, doesn’t display like the first one

.table,
tr {
  border: 1px solid black;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  border-radius: 5px;
}
<table id="expand" style="display:none" class="table">
  <tr>
    <th>Date</th>
    <th>Supplier</th>
    <th>Amount</th>
    <th>Reason</th>
  </tr>
  <tr>
    <th><input type="text"></th>
    <th><input type="text"></th>
    <th><input type="text"></th>
    <th><input type="text"></th>
  </tr>
  <tr>
    <th><input type="text"></th>
    <th><input type="text"></th>
    <th><input type="text"></th>
    <th><input type="text"></th>
  </tr>
  <tr>
    <th><input type="text"></th>
    <th><input type="text"></th>
    <th><input type="text"></th>
    <th><input type="text"></th>
  </tr>
  <tr>
    <th><input type="text"></th>
    <th><input type="text"></th>
    <th><input type="text"></th>
    <th><input type="text"></th>
  </tr>
  <tr>
    <th><input type="text"></th>
    <th><input type="text"></th>
    <th><input type="text"></th>
    <th><input type="text"></th>
  </tr>
</table>
</table>
</div>

<button id="expand-btn" class="button" onClick="expandTable()">Expand</button>
Tags:

2

Answers


  1. 0

    If you need to wrap a table inside another table, you need to do something like this (nest a < table > inside a < table > tag):

    <table>
  <tr>
    <td>
        <table>
           <tr>
              <td></td>
           </tr>
        </table>
    </td>
  </tr>
<table>

    In addition, CSS cannot control table cell well. When content are long, table will expend by itself, like this:
    enter image description here

    enter image description here

    Therefore, use < div > instead of < table > if you really need control the style.

    Login or Signup to reply.
  2. 0

    As you’re not responding to comments or developing further more your question as requested (which is exactly the opposite of what you’re required to do when asking). Imma try to guess your final goal and present the following.

    Again! change the th tag to td for all table cells except the for header

    function expandTable() {
  document.getElementById("expand").classList.toggle('hidden');
}
    .table,
tr {
  border: 1px solid black;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  border-radius: 5px;
}

.hidden {
  display: none;
}
    <div id="expenses-table">
  <table class="table mb-4">
  <thead>
    <tr>
      <th>Date</th>
      <th>Supplier</th>
      <th>Amount</th>
      <th>Reason</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th><input type="text"></th>
      <th><input type="text"></th>
      <th><input type="text"></th>
      <th><input type="text"></th>
    </tr>
  </tbody>
  <tbody id="expand" class="hidden">
  <tr>
    <th><input type="text"></th>
    <th><input type="text"></th>
    <th><input type="text"></th>
    <th><input type="text"></th>
  </tr>
  <tr>
    <th><input type="text"></th>
    <th><input type="text"></th>
    <th><input type="text"></th>
    <th><input type="text"></th>
  </tr>
  <tr>
    <th><input type="text"></th>
    <th><input type="text"></th>
    <th><input type="text"></th>
    <th><input type="text"></th>
  </tr>
  <tr>
    <th><input type="text"></th>
    <th><input type="text"></th>
    <th><input type="text"></th>
    <th><input type="text"></th>
  </tr>
  <tr>
    <th><input type="text"></th>
    <th><input type="text"></th>
    <th><input type="text"></th>
    <th><input type="text"></th>
  </tr>
</tbody>
</table>
</div>

<button id="expand-btn" class="button" onClick="expandTable()">Expand</button>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search