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

How to make a table with filter like picture below – Html

image1

I don’t know how to make 2 sub-block in the Business A Chaud column and Potential Business Column.

Thank’s!

It actually resulted in a table with input but, I don’t know how to make PUSH & CtoC Column in Business A Chaud Column and Potential Business Column like image.

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    By adding the for loop as in the following figure, it breaks the block.

    enter image description here


  2. 0

    use html’s colspan feature,
    using colspan="2" will make Business A Chaud column take 2 columns width

    table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 15px;
}
    <table >
    <tbody>
        <tr>
            <td>code..</td>
            <td>libelee..</td>
            <td colspan="2">business ...</td>   <!--here-->
            <td colspan="2">potential...</td>   <!--here-->
        </tr>
        <tr>
            <td>Tapper le</td>
            <td>Tapper le</td>
            <td>push</td>
            <td>ctoc</td>
            <td>push</td>
            <td>ctoc</td>
        </tr>
        <tr>
            <td>AAA</td>
            <td>Agency</td>
            <td>data for push here</td>
            <td>data for ctoc here</td>
            <td>data for push here</td>
            <td>data for ctoc here</td>
        </tr>
    </tbody>
</table>
    Login or Signup to reply.
  3. 0

    check this table, colspan and rowspan both are used

    table,
td,
th {
  border: 1px solid #595959;
  border-collapse: collapse;
  text-align: center;
}
td,
th {
  padding: 3px;
}
th {
  height: 58px;
}
.sorting_lbl {
  line-height: 52px;
}

.sorting {
  float: right;
}
.sort_asc {
  display: block;
  padding: 4px;
  position: relative;
  cursor: pointer;
}
.sort_decs {
  display: block;
  padding: 4px;
  cursor: pointer;
}
.sort_decs span {
  display: inline-block;
  position: relative;
  transform: rotate(180deg);
}
    <table>
  <tbody>
    <tr>
      <th width="150">
        <span class="sorting_lbl">
          Code structure 
        </span>
        <span class="sorting">
          <button class="sort_asc">^</button>
          <button class="sort_decs"><span>^</span></button>
        </span>
      </th>
      <th width="250">
        <span class="sorting_lbl">
           libelle agence
        </span>
        <span class="sorting">
          <button class="sort_asc">^</button>
          <button class="sort_decs"><span>^</span></button>
        </span>
       </th>
      <th width="300" colspan="2">business a chaud</th>
      <th width="300 "colspan="2">potential business</th>
    </tr>
    <tr>
      <td>tapper le code</td>
      <td>tapper le nom de i'agence</td>
      <td>push</td>
      <td>ctoc</td>
      <td>push</td>
      <td>ctoc</td>
    </tr>
    <tr>
      <td rowspan="2">aaa</td>
      <td rowspan="2">agence lyon</td>
      <td><input type="checkbox"></td>
      <td><input type="checkbox"></td>
      <td><input type="checkbox"></td>
      <td><input type="checkbox"></td>
    </tr>
    <tr>
      <td>date effet: 03/01/2023</td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td rowspan="2">xxx</td>
      <td rowspan="2">agence bordeaux</td>
      <td><input type="checkbox"></td>
      <td><input type="checkbox"></td>
      <td><input type="checkbox"></td>
      <td><input type="checkbox"></td>
    </tr>
    <tr>
      <td>date effet: 03/01/2023</td>
      <td>date effet: 01/01/2023</td>
      <td>date effet: 01/01/2023</td>
      <td>date effet: 01/01/2023</td>
    </tr>
    <tr>
      <td rowspan="2">yyy</td>
      <td rowspan="2">agence nantes</td>
      <td><input type="checkbox"></td>
      <td><input type="checkbox"></td>
      <td><input type="checkbox"></td>
      <td><input type="checkbox"></td>

    </tr>
    <tr>
      <td>sauvegarde echoue</td>
      <td>date effet: 03/01/2023</td>
      <td>date effet: 03/01/2023</td>
      <td>date effet: 03/01/2023</td>
    </tr>
    <tr>
      <td rowspan="2">yyy</td>
      <td rowspan="2">agence toto</td>
      <td><input type="checkbox"></td>
      <td><input type="checkbox"></td>
      <td><input type="checkbox"></td>
      <td><input type="checkbox"></td>

    </tr>
    <tr>
      <td>date effet: 03/01/2023</td>
      <td>date effet: 03/01/2023</td>
      <td>date effet: 03/01/2023</td>
      <td>date effet: 03/01/2023</td>
    </tr>
  </tbody>
</table>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search