Как центрировать сворачиваемый контент под строкой таблицы, используя только HTML / CSS?

Question

У меня есть такая таблица:

table, td, th {
  border: 1px solid #ddd;
  text-align: left;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  padding: 15px;
}

<table>
  <tr>
    <th>Permit ID</th>
    <th>Unit Number</th>
    <th>License Plate</th>
    <th>Color</th>
    <th>Model</th>
  </tr>
  <tr>
    <td>1</td>
    <td>8475</td>
    <td>e3SJwJ</td>
    <td>White</td>
    <td>Abarth</td>
  </tr>
  <table>
    <tr>
      <td>Resident Name: Liam Anderson</td>
      <td>Resident is: Owner</td>
      <td>Resident phone: (611) 538-7439</td>
    </tr>
    <tr>
      <td>Resident has used 25 days of visitor parking</td>
      <td>Visitor Name: Liam Anderson</td>
      <td>Visitor Phone: (611) 538-7439</td>
    </tr>
  </table>
  <tr>
    <td>2</td>
    <td>2011</td>
    <td>XYj28p</td>
    <td>Green</td>
    <td>Abott-Detroit</td>
  </tr>
  <table>
    <tr>
      <td>Resident Name: Noah Beckett</td>
      <td>Resident is: Owner</td>
      <td>Resident phone: (274) 330-0387</td>
    </tr>
    <tr>
      <td>Resident has used 8 days of visitor parking</td>
      <td>Visitor Name: Noah Beckett</td>
      <td>Visitor Phone: (274) 330-0387</td>
    </tr>
  </table>
</table>

Как я могу это исправить?

JsFiddle

ПРИМЕЧАНИЕ: Это образец, не конфиденциальная информация. Это вопрос html / css - я знаю, как реализовать сворачивание строк в javascript.

Answer 1

Вы определенно захотите использовать для этого библиотеку Datatables.

table, td, th {
  border: 1px solid #ddd;
  text-align: left;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  padding: 15px;
}

th.res_name_hdr, th.res_type_hdr, th.res_tele_hdr, th.park_days_hdr, th.vis_name_hdr, th.vis_tele_hdr {
  display: none;
}

td.res_name, td.res_type, td.res_tele, td.park_days, td.vis_name, td.vis_tele {
  display: none;
}

td.details-control {
    background: url('https://datatables.net/examples/resources/details_open.png') no-repeat center center;
    cursor: pointer;
}
tr.shown td.details-control {
    background: url('https://datatables.net/examples/resources/details_close.png') no-repeat center center;
}

    <script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">

    <script type="text/javascript" class="init">
    

/* Formatting function for row details - modify as you need */
function format ( d ) {

// `d` is the original data object for the row
    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
        '<tr>'+
            '<td>Resident Name:</td>'+
            '<td>'+d.res_name+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Resident Type:</td>'+
            '<td>'+d.res_type+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Resident Telephone:</td>'+
            '<td>'+d.res_tele+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Parking Days Used:</td>'+
            '<td>'+d.park_days+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Visitor Name:</td>'+
            '<td>'+d.vis_name+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Visitor Telephone:</td>'+
            '<td>'+d.vis_tele+'</td>'+
        '</tr>'+
    '</table>';
}

$(document).ready(function() {
    var table = $('#example').DataTable( {
        "columns": [
            {
                "className":      'details-control',
                "orderable":      false,
                "data":           null,
                "defaultContent": ''
            },
            { "data": "permit_id" },
            { "data": "unit_no" },
            { "data": "vehicle_licence" },
            { "data": "vehicle_color" },
            { "data": "vehicle_model" },
            { "data": "res_name" },
            { "data": "res_type" },
            { "data": "res_tele" },
            { "data": "park_days" },
            { "data": "vis_name" },
            { "data": "vis_tele" }
        ],
        "order": [[1, 'asc']]
    } );
    
    // Add event listener for opening and closing details
    $('#example tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = table.row( tr );

        if ( row.child.isShown() ) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        }
        else {
            // Open this row
            row.child( format(row.data()) ).show();
            tr.addClass('shown');
        }
    } );
} );
    </script>
  
<table id='example'  class='display' style='width:100%'>
  <thead>
  <tr>
    <th></th>
    <th class='permit_id_hdr'>Permit ID</th>
    <th class='unit_no_hdr'>Unit Number</th>
    <th class='vehicle_licence_hdr'>License Plate</th>
    <th class='vehicle_color_hdr'>Color</th>
    <th class='vehicle_model_hdr'>Model</th>
    <!-- the rest of the th don't need names since they are hidden. I put them in so you know what they were -->
    <th class='res_name_hdr'>Resident Name</th>
    <th class='res_type_hdr'>Resident Type</th>
    <th class='res_tele_hdr'>Resident Telephone</th>
    <th class='park_days_hdr'>Park Days Used</th>
    <th class='vis_tele_hdr'>Resident Telephone</th>
    <th class='vis_tele_hdr'>Resident Telephone</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td></td>
    <td class='permit_id'>1</td>
    <td class='unit_no'>8475</td>
    <td class='vehicle_licence'>e3SJwJ</td>
    <td class='vehicle_color'>White</td>
    <td class='vehicle_model'>Abarth</td>
    <td class='res_name'>Liam Anderson</td>
    <td class='res_type'>Owner</td>
    <td class='res_tele'>(611) 538-7439</td>
    <td class='park_days'>25</td>
    <td class='vis_name'>Liam Anderson</td>
    <td class='vis_tele'>(611) 538-743</td>
  </tr>
  <tr>
    <td></td>
    <td class='permit_id'>2</td>
    <td class='unit_no'>2011</td>
    <td class='vehicle_licence'>XYj28p</td>
    <td class='vehicle_color'>Green</td>
    <td class='vehicle_model'>Abott-Detroit</td>
    <td class='res_name'>Noah Beckett</td>
    <td class='res_type'>Owner</td>
    <td class='res_tele'>(274) 330-0387</td>
    <td class='park_days'>8</td>
    <td class='vis_name'>Noah Beckett</td>
    <td class='vis_tele'>(274) 330-0387</td>
  </tr>
  </tbody>
</table>

Answer 2

Это потому, что у вас есть 2 table элемента, вложенных в элемент table. Чтобы использовать вложенные таблицы, вы должны заключить внутренние таблицы в <td>:

table,
td,
th {
  border: 1px solid #ddd;
  text-align: left;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th,
td {
  padding: 15px;
}

<table>
  <tr>
    <th>Permit ID</th>
    <th>Unit Number</th>
    <th>License Plate</th>
    <th>Color</th>
    <th>Model</th>
  </tr>
  <tr>
    <td>1</td>
    <td>8475</td>
    <td>e3SJwJ</td>
    <td>White</td>
    <td>Abarth</td>
  </tr>
  <td>
    <table>
      <tr>
        <td>Resident Name: Liam Anderson</td>
        <td>Resident is: Owner</td>
        <td>Resident phone: (611) 538-7439</td>
      </tr>
      <tr>
        <td>Resident has used 25 days of visitor parking</td>
        <td>Visitor Name: Liam Anderson</td>
        <td>Visitor Phone: (611) 538-7439</td>
      </tr>
    </table>
  </td>
  <tr>
    <td>2</td>
    <td>2011</td>
    <td>XYj28p</td>
    <td>Green</td>
    <td>Abott-Detroit</td>
  </tr>
  <td>
    <table>
      <tr>
        <td>Resident Name: Noah Beckett</td>
        <td>Resident is: Owner</td>
        <td>Resident phone: (274) 330-0387</td>
      </tr>
      <tr>
        <td>Resident has used 8 days of visitor parking</td>
        <td>Visitor Name: Noah Beckett</td>
        <td>Visitor Phone: (274) 330-0387</td>
      </tr>
    </table>
  </td>
</table>

Если все, что вам нужно сделать, это разграничить эти конкретные разделы, вы можете просто использовать div вместо:

table,
td,
th {
  border: 1px solid #ddd;
  text-align: left;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th,
td {
  padding: 15px;
}

<table>
  <tr>
    <th>Permit ID</th>
    <th>Unit Number</th>
    <th>License Plate</th>
    <th>Color</th>
    <th>Model</th>
  </tr>
  <tr>
    <td>1</td>
    <td>8475</td>
    <td>e3SJwJ</td>
    <td>White</td>
    <td>Abarth</td>
  </tr>
  <div>
    <tr>
      <td>Resident Name: Liam Anderson</td>
      <td>Resident is: Owner</td>
      <td>Resident phone: (611) 538-7439</td>
    </tr>
    <tr>
      <td>Resident has used 25 days of visitor parking</td>
      <td>Visitor Name: Liam Anderson</td>
      <td>Visitor Phone: (611) 538-7439</td>
    </tr>
  </div>
  <tr>
    <td>2</td>
    <td>2011</td>
    <td>XYj28p</td>
    <td>Green</td>
    <td>Abott-Detroit</td>
  </tr>
  <div>
    <tr>
      <td>Resident Name: Noah Beckett</td>
      <td>Resident is: Owner</td>
      <td>Resident phone: (274) 330-0387</td>
    </tr>
    <tr>
      <td>Resident has used 8 days of visitor parking</td>
      <td>Visitor Name: Noah Beckett</td>
      <td>Visitor Phone: (274) 330-0387</td>
    </tr>
  </div>
</table>