CODEWITHSUNDEEP
htmlcsshtml-table
JB999
JB999

Reputation: 507

HTML Column Span for 2 Tables

I'm trying to create a table that is basically two tables in 1:

what I'm trying to accomplish

I tried to do it but it's looking a bit funky (excel replicated pic attached)

Result I'm getting right now

Does anyone know how to fix this?

Thanks!

Upvotes: 0

Views: 240

Answers (2)

vsync
vsync

Reputation: 130165

The biggest problem is that the colspan is not dividing equally (it must be an integer and not a float) because 5 is not a multiplier of 3. I advise trying to work with 2 separate tables.

table{ 
  width:300px; 
  text-align:left; 
  border-collapse: collapse; 
  font:20px Arial; 
  resize: auto;
  overflow: hidden;
}

table th{ font-size:1.2em; color:white; }
table th:nth-child(1){ background: LightSkyBlue; }
table th:nth-child(2){ background: MediumOrchid; }
table th:nth-child(3){ background: YellowGreen; }
table td{ border:1px solid silver; }

.header{
 background: LightSkyBlue;
 color: white;
 text-align: center;
}
<table>
  <thead>
    <tr>
      <th colspan=2>1
      <th colspan=2>2
      <th colspan=2>3
  <thead>
  <tbody>
    <tr>
      <td colspan=2>1
      <td colspan=2>2
      <td colspan=2>3
    </tr>
    <tr class='header'>
      <td colspan=5>secnod header
    </tr>
    <tr>
      <td>1
      <td>2
      <td>3
      <td>4
      <td>5
    </tr>
  <thead>
</table>

You can also add a <table> inside a cell (<td>) of the "main" table:

table{ 
  width:300px; 
  text-align:left; 
  border-collapse: collapse; 
  font:20px Arial; 
  resize: auto;
  overflow: hidden;
}

table th{ font-size:1.2em; color:white; }
table th:nth-child(1){ background: LightSkyBlue; }
table th:nth-child(2){ background: MediumOrchid; }
table th:nth-child(3){ background: YellowGreen; }
table td{ border:1px solid silver; padding:0; }

table table{
  width: 100%;
  height: 100%;
  resize: none;
}

table table thead{ text-align: center; }
<table>
  <thead>
    <tr>
      <th>1
      <th>2
      <th>3
  <thead>
  <tbody>
    <tr>
      <td>1
      <td>2
      <td>3
    </tr>
    <tr>
      <td colspan=3>
        <table>
          <thead>
            <tr>
              <th colspan=5>Header
          <thead>
          <tbody>
            <tr>
              <td>1
              <td>2
              <td>3
              <td>4
              <td>5
            </tr>
          <thead>
        </table>
      </td>
    </tr>
  <thead>
</table>

Upvotes: 2

Shubham Dange
Shubham Dange

Reputation: 182

it's isnt good practice but you can add another inside element


 <tfoot>
<tr class='header'>
      <td colspan=5>secnod header
    </tr>
    <tr>
      <td>1
      <td>2
      <td>3
      <td>4
      <td>5
    </tr> </tfoot>

Upvotes: 1

Related Questions