如何创建一个JS函数，将`width：100％`除以`th`的数字？

Question

我从网站上获得了这个可滚动的表格并且它非常棒，但问题是它没有同样自动调整标题大小加上由于缺乏对JS的了解我没有关于如何做到这一点的想法。我相信它会根据for的数量使用tr > th然后将100％除以它们并将其设置为宽度。你能救我吗？

让我振作起来Scotty！

P.S。：我想用JS修复它，因为我将来会做一些改变它会搞乱它

＆＃13;

＆＃13;

function removeClassName(elem, className) {
  elem.className = elem.className.replace(className, "").trim();
}

function addCSSClass(elem, className) {
  removeClassName(elem, className);
  elem.className = (elem.className + " " + className).trim();
}

String.prototype.trim = function() {
  return this.replace(/^\s+|\s+$/, "");
};

function stripedTable() {
  if (document.getElementById && document.getElementsByTagName) {
    var allTables = document.getElementsByTagName('table');
    if (!allTables) {
      return;
    }

    for (var i = 0; i < allTables.length; i++) {
      if (allTables[i].className.match(/[\w\s ]*scrollTable[\w\s ]*/)) {
        var trs = allTables[i].getElementsByTagName("tr");
        for (var j = 0; j < trs.length; j++) {
          removeClassName(trs[j], 'alternateRow');
          addCSSClass(trs[j], 'normalRow');
        }
        for (var k = 0; k < trs.length; k += 2) {
          removeClassName(trs[k], 'normalRow');
          addCSSClass(trs[k], 'alternateRow');
        }
      }
    }
  }
}

window.onload = function() {
  stripedTable();
};

＆＃13;

th {
  word-break: break-all;
}
body {
  background: #FFF;
  color: #000;
  font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
  margin: 10px;
  padding: 0
}
table,
td,
a {
  color: #000;
  font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif
}
h1 {
  font: normal normal 18px Verdana, Geneva, Arial, Helvetica, sans-serif;
  margin: 0 0 5px 0
}
h2 {
  font: normal normal 16px Verdana, Geneva, Arial, Helvetica, sans-serif;
  margin: 0 0 5px 0
}
h3 {
  font: normal normal 13px Verdana, Geneva, Arial, Helvetica, sans-serif;
  color: #008000;
  margin: 0 0 15px 0
}
/* end basic styling                                 */

/* define height and width of scrollable area. Add 16px to width for scrollbar          */

div.tableContainer {
  clear: both;
  border: 1px solid #963;
  height: 285px;
  overflow: auto;
  width: 100%;
}
/* Reset overflow value to hidden for all non-IE browsers. */

html>body div.tableContainer {
  overflow: hidden;
  width: 100%;
  height: 100%;
}
/* define width of the table. IE browsers only                 */

div.tableContainer table {
  float: left;
  width: 100%;
}
/* define width of table. Add 16px to width for scrollbar.           */

/* All other non-IE browsers.                                        */

html>body div.tableContainer table {
  width: 100%;
}
/* set table header to a fixed position. WinIE 6.x only                                       */

/* In WinIE 6.x, any element with a position property set to relative and is a child of       */

/* an element that has an overflow property set, the relative value translates into fixed.    */

/* Ex: parent element DIV with a class of tableContainer has an overflow property set to auto */

thead.fixedHeader tr {
  position: relative
}
/* set THEAD element to have block level attributes. All other non-IE browsers            */

/* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */

html>body thead.fixedHeader tr {
  display: block
}
/* make the TH elements pretty */

thead.fixedHeader th {
  background: #C96;
  border-left: 1px solid #EB8;
  border-right: 1px solid #B74;
  border-top: 1px solid #EB8;
  font-weight: normal;
  padding: 4px 3px;
  text-align: left
}
/* make the A elements pretty. makes for nice clickable headers                */

thead.fixedHeader a,
thead.fixedHeader a:link,
thead.fixedHeader a:visited {
  color: #FFF;
  display: block;
  text-decoration: none;
  width: 100%
}
/* make the A elements pretty. makes for nice clickable headers                */

/* WARNING: swapping the background on hover may cause problems in WinIE 6.x   */

thead.fixedHeader a:hover {
  color: #FFF;
  display: block;
  text-decoration: underline;
  width: 100%
}
/* define the table content to be scrollable                                              */

/* set TBODY element to have block level attributes. All other non-IE browsers            */

/* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */

/* induced side effect is that child TDs no longer accept width: auto                     */

html>body tbody.scrollContent {
  display: block;
  height: 262px;
  overflow: auto;
  width: 100%
}
/* make TD elements pretty. Provide alternating classes for striping the table */

/* http://www.alistapart.com/articles/zebratables/                             */

tbody.scrollContent td,
tbody.scrollContent tr.normalRow td {
  background: #FFF;
  border-bottom: none;
  border-left: none;
  border-right: 1px solid #CCC;
  border-top: 1px solid #DDD;
  padding: 2px 3px 3px 4px
}
tbody.scrollContent tr.alternateRow td {
  background: #EEE;
  border-bottom: none;
  border-left: none;
  border-right: 1px solid #CCC;
  border-top: 1px solid #DDD;
  padding: 2px 3px 3px 4px
}
/* define width of TH elements: 1st, 2nd, and 3rd respectively.          */

/* Add 16px to last TH for scrollbar padding. All other non-IE browsers. */

/* http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors        */

/* define width of TD elements: 1st, 2nd, and 3rd respectively.          */

/* All other non-IE browsers.                                            */

/* http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors        */

/*<----Cells*/

html>body tbody.scrollContent td {
  width: 100px;
}
html>body tbody.scrollContent td + td {
  width: 100px
}
html>body tbody.scrollContent td + td + td {
  width: 100px
}
/*<----Cells*/

/*<----Headers*/

html>body thead.fixedHeader th {
  width: 200px
}
html>body thead.fixedHeader th + th {
  width: 100px
}
html>body thead.fixedHeader th + th + th {
  width: 316px
}
/*<----Headers*/

＆＃13;

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title>Pure CSS Scrollable Table with Fixed Header</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta http-equiv="language" content="en-us">

  <style type="text/css"></style>
</head>

<body>

  <h1>Pure CSS Scrollable Table with Fixed Header</h1>


  <div id="tableContainer" class="tableContainer">
    <table border="0" cellpadding="0" cellspacing="0" width="100%" class="scrollTable">
      <thead class="fixedHeader">
        <tr class="alternateRow">
          <th><a href="#">Header 1ahjsgdhjagsdhjgahjsdghjasgdhjagshjdgahjsdghjagsdhj</a>
          </th>
          <th><a href="#">Header 2</a>
          </th>
          <th><a href="#">Header 3</a>
          </th>
        </tr>
      </thead>
      <tbody class="scrollContent">
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>

      </tbody>
    </table>
  </div>

  <div>
    <br>
  </div>



</body><span class="gr__tooltip"><span class="gr__tooltip-content"></span><i class="gr__tooltip-logo"></i><span class="gr__triangle"></span></span>

</html>

＆＃13;

＆＃13;

＆＃13;

Answer 1

如何使用table-layout: fixed？

table {
    table-layout: fixed;
} 

Answer 2

我同意CSS可能是更好的选择，但是既然你问过，你就不能这样做：

var th = document.getElementsByTagName("th");

for(var i=0; i<th.length; i++) {
    th[i].width = (100/th.length) + "%";    
}

已编辑：已添加Fiddle

Answer 3

要使用table.offsetWidth查找整个表格的宽度，请按照以下方式在表格中循环：

    var table = document.getElementById("your-table-id");
    var w = table.offsetWidth; //total width of the table

    for (var y = 0; y < table.rows.length; y++){  // cycle through rows
        var row = table.rows[y];
        for (var x = 0; x < row.cells.length; x++) { // cycle through cells
            var cell = row.cells[x];
            cell.style.width = (w / row.cells.length) + "px"; // add 'px' for a unit
        }
    }

这是JSfiddle。