Question

我一直在使用jQuery从头创建一个表，唯一的问题是，我无法使.th和td填满整个{{ 1}}没有搞砸我的桌子。

应该如何：

.tr

问题：

| head |      |
| erla | head | When the first th's text it too big  it should expand both ths
|_laha_|______|
| cell | cell |
| cell | cell |
| cell | cell |
| cell | cell |

| head | head |
| erla |------| When the first th's text it too big it doesn't expand both ths
|_laha_|      |
| cell | cell |
| cell | cell |
| cell | cell |
| cell | cell |

$.fn.scrollify = function() {
  //Set up header
  $(this.selector + ' .thead .tr .th').width(($(this.selector + ' .thead').innerWidth() / $(this.selector + ' .thead .tr .th').length) - (19 / $(this.selector + ' .thead .tr .th').length));

  //Set up body
  $(this.selector + ' .tbody').width($(this.selector + ' .tbody').outerWidth());
  $(this.selector + ' .tbody').height($(this).height() - $(this.selector + " .thead").outerHeight());
  $(this.selector + ' .tbody .tr .td').width((($(this.selector + ' .thead').innerWidth() / $(this.selector + ' .thead .tr .th').length)) - (19 / $(this.selector + ' .thead .tr .th').length));
};

$(".table").scrollify();

.td,
.th {
  display: inline-table;
  word-break: break-all;
  word-wrap: break-word;
  height: auto;
}
.tbody {
  overflow-y: scroll;
  overflow-x: hidden;
}
.table {
  padding: 1px;
  border: 1px solid green;
  width: 300px;
  height: 100px;
}
.th {
  text-align: center;
  border: 1px solid red;
  margin: 0 -5px -1px 0;
}
.td {
  border: 1px solid blue;
  margin: 0 -5px -1px 0;
}

Answer 1

您可以使用以下内容使div表现得像表：

.table {
  border-collapse:collapse;
  display: table;
  width:300px;
}
.thead {
  display:table-header-group;
}
.tbody {
  display:table-row-group;
}
.tr {
  display: table-row;
}
.td,
.th {
  display: table-cell;
  word-break: break-all;
  word-wrap: break-word;
  vertical-align:middle;
  /* this is just for example */
  width: 100px;    
  border:1px solid black;
}

<div class="table">
  <div class="thead">
    <div class="tr">
      <div class="th">Headerasdasdasdasdasd</div>
      <div class="th">Header</div>
      <div class="th">Header</div>
    </div>
  </div>
  <div class="tbody">
    <div class="tr">
      <div class="td">Header</div>
      <div class="td">Header</div>
      <div class="td">Header</div>
    </div>

    <div class="tr">
      <div class="td">Header</div>
      <div class="td">Header</div>
      <div class="td">Header</div>
    </div>

    <div class="tr">
      <div class="td">Header</div>
      <div class="td">Header</div>
      <div class="td">Header</div>
    </div>

    <div class="tr">
      <div class="td">Header</div>
      <div class="td">Header</div>
      <div class="td">Header</div>
    </div>

    <div class="tr">
      <div class="td">Headerasdasdasd</div>
      <div class="td">Header</div>
      <div class="td">Header</div>
    </div>
  </div>
</div>

从语义上讲，如果这是表格数据，你应该使用一个实际的表，然后你可以给表格标题指定范围

Answer 2

尝试使用display：table-cell

.td, .th {
   display: table-cell;
   word-break: break-all;
   word-wrap: break-word;
   height: auto;
}

小提琴：https://jsfiddle.net/07krv81m/

如何使我的div具有自动“100％的父级”高度？

2 个答案: