Question

对于我的作业，我必须使用标签制作多个表格。所以我想对齐我的桌子，我可以对齐1，但是当我想要对齐另一个桌子时，那打破了一切。而且我的搜索栏也有问题，我有多个搜索栏，而且当我在打破第一张桌子的第二张桌子上进行搜索时。

我尝试使用其他JS来调整表的大小，但是那没用

function resizeTables() {
  console.log("executeResize:");
  var tableArrOrigin = $(".search-table")[0]; //var tableArr = document.getElementsByTagName('table');
  var tableArrDestiny = $(".filter-table")[0];

  var cellWidths = new Array();


  for (j = 0; j < tableArrOrigin.rows[0].cells.length; j++) {
    var cell = tableArrOrigin.rows[0].cells[j];

    if ($('body.ie').length > 0) { //IE browser
      cellWidths[j] = $(cell).width() + 2; //2=padding, apply fix for IE due to box model managed differently
      console.log('IE ejecutado')
    } else {
      cellWidths[j] = $(cell).width(); //cellWidths[j] = cell.clientWidth - $(cell).css('padding-right')-$(cell).css('padding-left');
      console.log('No IE ejecutado')
    }
  }


  for (j = 1; j < tableArrOrigin.rows[0].cells.length; j++) {
    //tableArrDestiny.rows[0].cells[j].style.width = cellWidths[j]+'px !important;';
    $(tableArrDestiny.rows[0].cells[j]).attr('style', 'width:' + cellWidths[j] + 'px !important');
  }

}

function resizeTables2() {
  console.log("executeResize2:");
  var tableArrOrigin2 = $(".search-table2")[0]; //var tableArr = document.getElementsByTagName('table');
  var tableArrDestiny2 = $(".filter-table2")[0];

  var cellWidths2 = new Array();




  for (j = 0; j < tableArrOrigin2.rows[0].cells.length; j++) {
    var cell2 = tableArrOrigin2.rows[0].cells[j];

    if ($('body.ie').length > 0) { //IE browser
      cellWidths2[j] = $(cell2).width() + 2;
      console.log('IE ejecutado')
    } else {
      cellWidths2[j] = $(cell2).width(); //cellWidths2[j] = cell.clientWidth - $(cell).css('padding-right')-$(cell).css('padding-left');
      console.log('No IE ejecutado')
    }
  }

  for (j = 1; j < tableArrOrigin2.rows[0].cells.length; j++) {

    $(tableArrDestiny2.rows[0].cells[j]).attr('style', 'width:' + cellWidths2[j] + 'px !important');
  }

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>A Pen by Augusto</title>
  <link rel='stylesheet' href="jquery-ui.css">
  <link rel="stylesheet" href="./style.css">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>CodePen - A Pen by Augusto</title>
  <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
  <link rel="stylesheet" href="style.css">
  <script src="script.js" type="text/javascript"></script>
  <script type="text/javascript">
    function change_onglet(name) {
      document.getElementById('onglet_' + anc_onglet).className = 'onglet_0 onglet';
      document.getElementById('onglet_' + name).className = 'onglet_1 onglet';
      document.getElementById('contenu_onglet_' + anc_onglet).style.display = 'none';
      document.getElementById('contenu_onglet_' + name).style.display = 'block';
      anc_onglet = name;
    }
  </script>
</head>

<body>
  <h1>Table Sorter Final</h1>
  <input type="search" class="light-table-filter" data-table="search-table" placeholder="Search..">
  <!-- chercher le resize -->
  <br/>
  <br/>
  <div id="combito">
    <div id="separator"></div>
    <div class="opt-combito" id="asc">
      <!-- <img src="images/hmenu-asc.gif" alt="" /> -->
      <!-- non utiliser -->
      <span>Sort Ascending</span>
    </div>
    <div class="opt-combito" id="desc">
      <!-- <img src="images/hmenu-desc.gif" alt="" /> -->
      <!-- non utiliser -->
      <span>Sort Descending</span>
    </div>
  </div>
  <div class="systeme_onglets">
    <div class="onglets">
      <span class="onglet_0 onglet" id="onglet_quoi" onclick="javascript:change_onglet('quoi');">Tableau</span>
      <span class="onglet_0 onglet" id="onglet_pourquoi" onclick="javascript:change_onglet('pourquoi');">Pourquoi</span>
      <span class="onglet_0 onglet" id="onglet_hallo" onclick="javascript:change_onglet('hallo');">hallo</span>

    </div>
    <div class="contenu_onglets">
      <div class="contenu_onglet" id="contenu_onglet_quoi">
        <h1>Tableau</h1>
        <table id="test" class="filter-table" style="border-spacing: 0px;" border="1">
          <thead>
            <tr>
              <th style="padding: 0px; width: 20px;"><input type="text" style="display:block;width: 95%;margin-left: auto;margin-right: auto;" class="searchByColumn" /></th>
              <th style="padding: 0px;"><input type="text" style="display:block;width: 95%;margin-left: auto;margin-right: auto;" class="searchByColumn" /></th>
              <th style="padding: 0px;">
                <div style="width:95px">&nbsp;</div>
              </th>
              <th style="padding: 0px;"><input type="text" style="display:block;width: 95%;margin-left: auto;margin-right: auto;" class="searchByColumn" /></th>
              <th style="padding: 0px;">
                <select style="display:block;width: 95%;margin-left: auto;margin-right: auto;" class="searchByColumn">
                  <option selected="true" value="">--All--</option>
                </select>
              </th>
              <th style="padding: 0px;">
                <select style="display:block;width: 95%;margin-left: auto;margin-right: auto;" class="searchByColumn">
                  <option selected="true" value="">--All--</option>
                </select>
              </th>
              <th style="padding: 0px;">
                <select style="display:block;width: 95%;margin-left: auto;margin-right: auto;" class="searchByColumn">
                  <option selected="true" value="">--All--</option>
                </select>
              </th>
              <th style="padding: 0px;">
                <select style="display:block;width:95%;margin-left: auto;margin-right: auto;" class="searchByColumn">
                  <option selected="true" value="">--All--</option>
                </select>
              </th>
              <th style="padding: 0px;">
                <select style="display:block;width: 95%;margin-left: auto;margin-right: auto;" class="searchByColumn">
                  <option selected="true" value="">--All--</option>
                </select>
              </th>
            </tr>
          </thead>
        </table>
        <table border="1" id="tablita" class="sortable search-table">
          <thead>
            <tr>
              <th id="column-a" class="menu" style="width: 10px;">ID</th>
              <th data-field="Name" data-checkbox="true" class="menu">Name</th>
              <th data-field="Phone" data-filter-control="input" data-sortable="true" class="menu">Phone</th>
              <th data-field="Email" data-filter-control="select" data-sortable="true" class="menu">Email</th>
              <th data-field="City" data-filter-control="select" data-sortable="true" class="menu">City</th>
              <th data-field="State" data-sortable="true" class="menu">State</th>
              <th data-field="Zipcode" data-sortable="true" class="menu">Zip Code</th>
              <th data-field="Status" data-sortable="true" class="menu">Status</th>
              <th data-field="Vehicle" data-sortable="true" class="menu">Vehicle</th>
            </tr>
          </thead>
          <tbody id="tbody">
            <div id="tabs1" class="tabs">
            </div>
          </tbody>
        </table>
      </div>
      <!-------------------------------------------------2eme tableau------------------------------------------------------------->
      <div class="contenu_onglet" id="contenu_onglet_pourquoi">
        <h1>Tableau 2</h1>
        <table id="test2" class="filter-table2" style="border-spacing: 0px;" border="1">
          <thead>
            <tr>
              <th style="padding: 0px; width: 20px;"><input type="text" style="display:block;width: 95%;margin-left: auto;margin-right: auto;" class="searchByColumn" /></th>
              <th style="padding: 0px;"><input type="text" style="display:block;width: 95%;margin-left: auto;margin-right: auto;" class="searchByColumn" /></th>
              <th style="padding: 0px;">
                <div style="width:95px">&nbsp;</div>
              </th>
              <th style="padding: 0px;"><input type="text" style="display:block;width: 95%;margin-left: auto;margin-right: auto;" class="searchByColumn" /></th>
              <th style="padding: 0px;">
                <select style="display:block;width: 95%;margin-left: auto;margin-right: auto;" class="searchByColumn">
                  <option selected="true" value="">--All--</option>
                </select>
              </th>
              <th style="padding: 0px;">
                <select style="display:block;width: 95%;margin-left: auto;margin-right: auto;" class="searchByColumn">
                  <option selected="true" value="">--All--</option>
                </select>
              </th>
              <th style="padding: 0px;">
                <select style="display:block;width: 95%;margin-left: auto;margin-right: auto;" class="searchByColumn">
                  <option selected="true" value="">--All--</option>
                </select>
              </th>
            </tr>
          </thead>
        </table>
        <table border="1" id="tablita2" class="sortable search-table2">
          <thead>
            <tr>
              <th id="column-a" class="menu" style="width: 10px;">ID</th>
              <th data-field="Name" data-checkbox="true" class="menu">Name</th>
              <th data-field="Phone" data-filter-control="input" data-sortable="true" class="menu">Phone</th>
              <th data-field="Email" data-filter-control="select" data-sortable="true" class="menu">Email</th>
              <th data-field="City" data-filter-control="select" data-sortable="true" class="menu">City</th>
              <th data-field="State" data-sortable="true" class="menu">State</th>
              <th data-field="Zipcode" data-sortable="true" class="menu">Zip Code</th>
            </tr>
          </thead>
          <tbody id="tbody2">
            <div id="tab2" class="tabs2">
            </div>
          </tbody>
        </table>
      </div>
      <div class="contenu_onglet" id="contenu_onglet_hallo">
        <li>test1</li>
        <li>test2</li>
        <li>test3</li>
        <li>test4</li>
      </div>
    </div>
  </div>
  <script type="text/javascript">
    var anc_onglet = 'quoi';
    change_onglet(anc_onglet);
  </script>
  <script src='https://codepen.io/assets/libs/fullpage/jquery_and_jqueryui.js'></script>
  <!-- non utiliser -->
  <script src="js/index.js"></script>
  <script src="jquery.min.js"></script>
  <script src="jquery-ui.min.js"></script>
  <script src="tableau.js"></script>
  <script src="tableau2.js"></script>
  <script src="./script.js"></script>
  <button id="ToggleIdCol">Hide/show 1st</button>
  <script>
    var onoff = false;

    $(document).ready(function() {
      $("#ToggleIdCol").click(function() {
        $("#test").find("tr").each(function(key, value) {
          $(value).find("th:nth-child(1)").toggle();
          onoff = !(onoff);
        });
        $("#tablita").find("tr").each(function(key, value) {
          $(value).find("th:nth-child(1)").toggle();
          $(value).find("td:nth-child(1)").toggle();
        });
      });
      $("#test").find("tr").each(function(key, value) {
        $(value).find("th:nth-child(1)").toggle(50);
      });
      $("#tablita").find("tr").each(function(key, value) {
        $(value).find("th:nth-child(1)").toggle();
        $(value).find("td:nth-child(1)").toggle();
      });
    });
  </script>
</body>

</html>

我想将搜索栏表与两个表都对齐，所以在第一个工作的表上对齐，但在第二个工作的表上不对齐，而且我不知道该怎么做。

当前看起来像这样，我的数据未对齐：

Answer 1

要具有相同大小的标题行（即，对齐标题单元格），只需使用一个表具有双标题行。一个用于select，另一个用于title/labels

已更新

如果您使用仅一个（一个-表示一个同时包含 filter和data/content的表，在您的示例中，用两个表而不是四个表）table对齐所有列都没有问题（即删除<table id="tablita">并将其合并为<table id="test"> ）。如果您需要具有所示的html模板结构（不能使用一个表），则需要使用javascript以编程方式同步表列。

 function syncWidth() {
    const origin = $("#test > thead > tr:first-child > th");
    const target= $("#tablita > thead > tr:first-child > th");

    target.each((i, cell) => {
        let related = origin.eq(i),
            oWidth = related.outerWidth();

        $(cell).css({
            "min-width": oWidth
        }).width(related.width());
    });
}

类似于此代码片段，但是您必须在任何表更新后调用该方法（即在表中添加/删除/更新行或在其他数据/样式/中添加其他内容，否则大小会更改表之一）。 恕我直言更简单的更改模板结构，使其具有仅一个表。以及使用一个表而不是单独的

的结果

function resizeTables() {
  console.log("executeResize:");
  var tableArrOrigin = $(".search-table")[0]; //var tableArr = document.getElementsByTagName('table');
  var tableArrDestiny = $(".filter-table")[0];

  var cellWidths = new Array();


  for (j = 0; j < tableArrOrigin.rows[0].cells.length; j++) {
    var cell = tableArrOrigin.rows[0].cells[j];

    if ($('body.ie').length > 0) { //IE browser
      cellWidths[j] = $(cell).width() + 2; //2=padding, apply fix for IE due to box model managed differently
      console.log('IE ejecutado')
    } else {
      cellWidths[j] = $(cell).width(); //cellWidths[j] = cell.clientWidth - $(cell).css('padding-right')-$(cell).css('padding-left');
      console.log('No IE ejecutado')
    }
  }


  for (j = 1; j < tableArrOrigin.rows[0].cells.length; j++) {
    //tableArrDestiny.rows[0].cells[j].style.width = cellWidths[j]+'px !important;';
    $(tableArrDestiny.rows[0].cells[j]).attr('style', 'width:' + cellWidths[j] + 'px !important');
  }

}

function resizeTables2() {
  console.log("executeResize2:");
  var tableArrOrigin2 = $(".search-table2")[0]; //var tableArr = document.getElementsByTagName('table');
  var tableArrDestiny2 = $(".filter-table2")[0];

  var cellWidths2 = new Array();




  for (j = 0; j < tableArrOrigin2.rows[0].cells.length; j++) {
    var cell2 = tableArrOrigin2.rows[0].cells[j];

    if ($('body.ie').length > 0) { //IE browser
      cellWidths2[j] = $(cell2).width() + 2;
      console.log('IE ejecutado')
    } else {
      cellWidths2[j] = $(cell2).width(); //cellWidths2[j] = cell.clientWidth - $(cell).css('padding-right')-$(cell).css('padding-left');
      console.log('No IE ejecutado')
    }
  }

  for (j = 1; j < tableArrOrigin2.rows[0].cells.length; j++) {

    $(tableArrDestiny2.rows[0].cells[j]).attr('style', 'width:' + cellWidths2[j] + 'px !important');
  }

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>A Pen by Augusto</title>
  <link rel='stylesheet' href="jquery-ui.css">
  <link rel="stylesheet" href="./style.css">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>CodePen - A Pen by Augusto</title>
  <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
  <link rel="stylesheet" href="style.css">
  <script src="script.js" type="text/javascript"></script>
  <script type="text/javascript">
    function change_onglet(name) {
      document.getElementById('onglet_' + anc_onglet).className = 'onglet_0 onglet';
      document.getElementById('onglet_' + name).className = 'onglet_1 onglet';
      document.getElementById('contenu_onglet_' + anc_onglet).style.display = 'none';
      document.getElementById('contenu_onglet_' + name).style.display = 'block';
      anc_onglet = name;
    }
  </script>
</head>

<body>
  <h1>Table Sorter Final</h1>
  <input type="search" class="light-table-filter" data-table="search-table" placeholder="Search..">
  <!-- chercher le resize -->
  <br/>
  <br/>
  <div id="combito">
    <div id="separator"></div>
    <div class="opt-combito" id="asc">
      <!-- <img src="images/hmenu-asc.gif" alt="" /> -->
      <!-- non utiliser -->
      <span>Sort Ascending</span>
    </div>
    <div class="opt-combito" id="desc">
      <!-- <img src="images/hmenu-desc.gif" alt="" /> -->
      <!-- non utiliser -->
      <span>Sort Descending</span>
    </div>
  </div>
  <div class="systeme_onglets">
    <div class="onglets">
      <span class="onglet_0 onglet" id="onglet_quoi" onclick="javascript:change_onglet('quoi');">Tableau</span>
      <span class="onglet_0 onglet" id="onglet_pourquoi" onclick="javascript:change_onglet('pourquoi');">Pourquoi</span>
      <span class="onglet_0 onglet" id="onglet_hallo" onclick="javascript:change_onglet('hallo');">hallo</span>

    </div>
    <div class="contenu_onglets">
      <div class="contenu_onglet" id="contenu_onglet_quoi">
        <h1>Tableau</h1>
        <table id="test" class="filter-table" style="border-spacing: 0px;" border="1">
          <thead>
            <tr>
              <th style="padding: 0px; width: 20px;"><input type="text" style="display:block;width: 95%;margin-left: auto;margin-right: auto;" class="searchByColumn" /></th>
              <th style="padding: 0px;"><input type="text" style="display:block;width: 95%;margin-left: auto;margin-right: auto;" class="searchByColumn" /></th>
              <th style="padding: 0px;">
                <div style="width:95px">&nbsp;</div>
              </th>
              <th style="padding: 0px;"><input type="text" style="display:block;width: 95%;margin-left: auto;margin-right: auto;" class="searchByColumn" /></th>
              <th style="padding: 0px;">
                <select style="display:block;width: 95%;margin-left: auto;margin-right: auto;" class="searchByColumn">
                  <option selected="true" value="">--All--</option>
                </select>
              </th>
              <th style="padding: 0px;">
                <select style="display:block;width: 95%;margin-left: auto;margin-right: auto;" class="searchByColumn">
                  <option selected="true" value="">--All--</option>
                </select>
              </th>
              <th style="padding: 0px;">
                <select style="display:block;width: 95%;margin-left: auto;margin-right: auto;" class="searchByColumn">
                  <option selected="true" value="">--All--</option>
                </select>
              </th>
              <th style="padding: 0px;">
                <select style="display:block;width:95%;margin-left: auto;margin-right: auto;" class="searchByColumn">
                  <option selected="true" value="">--All--</option>
                </select>
              </th>
              <th style="padding: 0px;">
                <select style="display:block;width: 95%;margin-left: auto;margin-right: auto;" class="searchByColumn">
                  <option selected="true" value="">--All--</option>
                </select>
              </th>
            </tr>
            <tr>
              <th id="column-a" class="menu" style="width: 10px;">ID</th>
              <th data-field="Name" data-checkbox="true" class="menu">Name</th>
              <th data-field="Phone" data-filter-control="input" data-sortable="true" class="menu">Phone</th>
              <th data-field="Email" data-filter-control="select" data-sortable="true" class="menu">Email</th>
              <th data-field="City" data-filter-control="select" data-sortable="true" class="menu">City</th>
              <th data-field="State" data-sortable="true" class="menu">State</th>
              <th data-field="Zipcode" data-sortable="true" class="menu">Zip Code</th>
              <th data-field="Status" data-sortable="true" class="menu">Status</th>
              <th data-field="Vehicle" data-sortable="true" class="menu">Vehicle</th>
            </tr>
          </thead>
          <tbody id="tbody">
             <tr>
              <td>1</td>
              <td>Person1 Name</td>
              <td>Person1 Phone</td>
              <td>Person1 Email</td>
              <td>Person1 City</td>
              <td>Person1 State</td>
              <td>Person1 Zip Code</td>
              <td>Person1 Status</td>
              <td>Person1 Vehicle</td>
             </tr>
             <tr>
              <td>2</td>
              <td>Person2 Name</td>
              <td>Person2 Phone</td>
              <td>Person2 Email</td>
              <td>Person2 City</td>
              <td>Person2 State</td>
              <td>Person2 Zip Code</td>
              <td>Person2 Status</td>
              <td>Person2 Vehicle</td>
             </tr>
          </tbody>
        </table>
      </div>
      <!-------------------------------------------------2eme tableau------------------------------------------------------------->
      <div class="contenu_onglet" id="contenu_onglet_pourquoi">
        <h1>Tableau 2</h1>
        <table id="test2" class="filter-table2" style="border-spacing: 0px;" border="1">
          <thead>
            <tr>
              <th style="padding: 0px; width: 20px;"><input type="text" style="display:block;width: 95%;margin-left: auto;margin-right: auto;" class="searchByColumn" /></th>
              <th style="padding: 0px;"><input type="text" style="display:block;width: 95%;margin-left: auto;margin-right: auto;" class="searchByColumn" /></th>
              <th style="padding: 0px;">
                <div style="width:95px">&nbsp;</div>
              </th>
              <th style="padding: 0px;"><input type="text" style="display:block;width: 95%;margin-left: auto;margin-right: auto;" class="searchByColumn" /></th>
              <th style="padding: 0px;">
                <select style="display:block;width: 95%;margin-left: auto;margin-right: auto;" class="searchByColumn">
                  <option selected="true" value="">--All--</option>
                </select>
              </th>
              <th style="padding: 0px;">
                <select style="display:block;width: 95%;margin-left: auto;margin-right: auto;" class="searchByColumn">
                  <option selected="true" value="">--All--</option>
                </select>
              </th>
              <th style="padding: 0px;">
                <select style="display:block;width: 95%;margin-left: auto;margin-right: auto;" class="searchByColumn">
                  <option selected="true" value="">--All--</option>
                </select>
              </th>
            </tr>
            <tr>
              <th id="column-a" class="menu" style="width: 10px;">ID</th>
              <th data-field="Name" data-checkbox="true" class="menu">Name</th>
              <th data-field="Phone" data-filter-control="input" data-sortable="true" class="menu">Phone</th>
              <th data-field="Email" data-filter-control="select" data-sortable="true" class="menu">Email</th>
              <th data-field="City" data-filter-control="select" data-sortable="true" class="menu">City</th>
              <th data-field="State" data-sortable="true" class="menu">State</th>
              <th data-field="Zipcode" data-sortable="true" class="menu">Zip Code</th>
            </tr>
          </thead>
          <tbody id="tbody2">
            <div id="tab2" class="tabs2">
            </div>
          </tbody>
        </table>
      </div>
      <div class="contenu_onglet" id="contenu_onglet_hallo">
        <li>test1</li>
        <li>test2</li>
        <li>test3</li>
        <li>test4</li>
      </div>
    </div>
  </div>
  <script type="text/javascript">
    var anc_onglet = 'quoi';
    change_onglet(anc_onglet);
  </script>
  <script src='https://codepen.io/assets/libs/fullpage/jquery_and_jqueryui.js'></script>
  <!-- non utiliser -->
  <script src="js/index.js"></script>
  <script src="jquery.min.js"></script>
  <script src="jquery-ui.min.js"></script>
  <script src="tableau.js"></script>
  <script src="tableau2.js"></script>
  <script src="./script.js"></script>
  <button id="ToggleIdCol">Hide/show 1st</button>
  <script>
    var onoff = false;

    $(document).ready(function() {
      $("#ToggleIdCol").click(function() {
        $("#test").find("tr").each(function(key, value) {
          $(value).find("th:nth-child(1),td:nth-child(1)").toggle();
          onoff = !(onoff);
        });
      });
      $("#test").find("tr").each(function(key, value) {
        $(value).find("th:nth-child(1),td:nth-child(1)").toggle(50);
      });
    });
  </script>
</body>

</html>

对齐2表，搜索表

1 个答案: