我一直在使用jQuery从头开始制作表格，唯一的问题是，如果不破坏表格，就无法使.ths和tds填满整个.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;
}<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<title>smartSystem</title>
</head>
<body>
<div class="myTable">
<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>
</div>
</body>
</html>尝试使用display：table-cell
.td, .th {
display: table-cell;
word-break: break-all;
word-wrap: break-word;
height: auto;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句