使桌子适合特定宽度

时间：2018-08-19 06:34:31

标签： jquery css html-table

我创建的表具有以下行为：

  • 在屏幕宽度为1302px或更大的屏幕上，表格宽度固定为1302px。这意味着最初小于1302px的表被扩展了（我已经在第二个表上解决了），大表被收缩了（溢出内容文本可能垂直显示/多行，这是我在第一个表上的问题）< / li>
  • 在小于1302px的屏幕宽度上，表格布局规则仍与较大的屏幕相同，但是视口是屏幕的100％减去边距。

这是我到目前为止所做的（jsfiddle，以便您可以更好地看到它）：

var checked = 0;
var rowCount = $("td.checkbox-action").length;
$("#table1 tr:odd, #table2 tr:odd").addClass("alternate-bg");


var currentWidth = 0;
var shrink;
var expand;

$(window).resize(function() {
  if ($(window).width() != currentWidth) {
    if ($(window).width() >= 1366) {
      $("table").each(function() {
        if ($(this).find ("tr").width() >= 1302) {
          if ($(this).attr("data-shrinked") == 0) {
            clearTimeout(shrink);
            shrink = setTimeout(shrinkTable($(this)), 100);
            $(this).attr("data-shrinked", 1);
          }
        }
        else {
          if ($(this).attr("data-expanded") == 0) {
            clearTimeout(expand);
            expand = setTimeout(expandTable($(this)), 100);
            $(this).attr("data-expanded", 1);
          }
        }
      });
    }
    else {
      $(".table-generic").css({"width": "100%"});
      $(".table-generic").css({"min-width": "0"});
      $(".table-generic").find("tbody").css({"width": "100%"});
      
    }
    currentWidth = $(window).width();
  }
});

function shrinkTable(obj) {
  if (obj.attr("data-expanded") == 0) {
    obj.find("tr").each(function() {
      $(this).find("td").not(":first").css({"padding-left": "12px"});
      $(this).find("td").not(":last").css({"padding-right": "12px"});
      $(this).find("th").not(":first").css({"padding-left": "12px"});
      $(this).find("th").not(":last").css({"padding-right": "12px"});
    });
    obj.css({"width": "1302px"});
    obj.css({"min-width": "1302px"});
    obj.find("tbody").css({"width": "100%"});
    obj.find("td").css({"text-overflow": "display"});
    console.log("shrink");
  }
}
    
function expandTable(obj) {
  if (obj.attr("data-shrinked") == 0) {
    var remainingWidth = 1302 - obj.find("tr").width();
    var colNum = obj.find("th").length;
    var extraPadding = (remainingWidth / ((colNum - 1)*2)) + 12;
    console.log(remainingWidth);
    obj.find("tr").each(function() {
      $(this).find("td").not(":first").css({"padding-left": extraPadding + "px"});
      $(this).find("td").not(":last").css({"padding-right": extraPadding + "px"});
      $(this).find("th").not(":first").css({"padding-left": extraPadding + "px"});
      $(this).find("th").not(":last").css({"padding-right": extraPadding + "px"});
    });
    obj.css({"min-width": "1302px"});
    obj.css({"margin-left": "50%"});
    obj.css({"transform": "translateX(-50%)"});
    obj.css({"min-width": "1302px"});
    obj.find("tbody").css({"width": "1302px"});
    console.log("expand");
  }
}
.dashed-wrapper {
  padding-bottom: 48px; 
}

table.table-generic {
  border-spacing:0;
  border-collapse: collapse;
  font-size: 13px;
  display: block;
  overflow-x: scroll !important;
  white-space: nowrap;
  color: #333;
  margin-left: 50%;
  transform: translateX(-50%);
  min-width: 1302px;
}

.table-generic tr {
  
}

.table-generic tr.first-row {
  border-bottom: solid 2px #D1D1D1;
  cursor: default;
}

.table-generic tr.first-row:hover {
  background: #fff; 
}

.table-generic td, th {
  text-align: left;
  height: 40px;
  padding-left: 12px;
  padding-right: 12px;
}

.table-generic tr.selectable-row:hover {
  background-color: #f1f1f1; 
  transition: background-color 0.2s;
}

.table-generic th {
  font-weight: 700;
}

.alternate-bg {
  background-color: #f8f8f8; 
}

.selected-bg,
.selected-bg:hover {
  background-color: #D0F3FF !important;
  outline: solid 1px #fff !important;
  transition: background-color 0.2s;
}

.table-generic td.icon {
  text-align: center; 
  padding-left: 0;
}

i {
  font-size: 13px;
  color: #aaa;
  cursor: pointer;
}

.icon i:hover {
  color: #00c983;
}

.table-sort i {
  margin-left: 8px;
}

.money {
  text-align: right !important; 
}

.history a {
  color: #0099ff;
  text-decoration: underline;
}

button {
  height: 32px;
  width: 48px;
  margin-right: 4px;
  border-radius: 3px;
  border: none;
  box-shadow: 0px 3px 6px 0 rgba(0,0,0,0.15);
}

button i {
  color: #fff;
  line-height: 20px !important;
}

.green {
  background-color: #00c983;
}

.red {
  background-color: #FF7979;
}

.table-action {
  padding-left: 6px;
  padding-right: 6px;
  text-align: center;
}

.table-action input {
  opacity: 0;
  position: relative;
}

.checkbox {
  width: 16px;
  height: 16px;
  border: solid 1px #D1D1D1;
  border-radius: 2px;
  display: inline-block;
  margin-left: -32px;
  margin-top: 4px;
  cursor: pointer;
  transition: border 0.4s;
}

.checkbox-checked {
  border: solid 1px #00c983;
  margin-top: 2px;
  transition: border 0.4s;
}

.checkbox-input {
  cursor: pointer;
}

.checkbox i {
  color: #00c983;
  display: none;
}

.checkbox i:hover {
  color: #00c983;
}

.table-generic th:first-child,
.table-generic td:first-child {
  padding-left: 24px;
}

#table1 th:first-child,
#table1 td:first-child {
  padding-left: 40px;
  padding-right: 10px;
}

.table-generic td:last-child {
  padding-right: 24px;
}

.table-action-last {
  padding-right: 16px;
  cursor: pointer;
  text-align: center;
}

th.table-action-last {
  cursor: default;
}

.table-sort {
  cursor: pointer; 
}

.table-pagination {
  width: 100%;
  display: block;
}

.table-pagination-btn i {
  color: #333; 
}

.table-pagination-btn {
  display: flex;
  float: right;
  height: 38px;
  border: solid 1px #D1D1D1;
  border-radius: 3px;
}

.table-pagination-btn-each {
  line-height: 38px; 
  width: 38px;
  display: inline-block;
  text-align: center;
  border-left: solid 1px #D1D1D1;
  font-size: 12px;
  cursor: pointer;
}

.table-pagination-btn-each:first-child {
  border-left: transparent; 
}

.table-pagination-btn-each:hover {
  background-color: #f8f8f8; 
  transition: background-color 0.2s;
}

.table-pagination-btn-each i {
  font-size: 8px; 
  transform: translateY(-1px);
}

.table-pagination-btn-each.selected-page {
  background-color: #00c983;
  font-weight: 700;
  color: #fff;
  cursor: default;
}

.pagination-disabled,
.pagination-disabled:hover {
  cursor: default;
  color: #aaa;
  background-color: #fff;
}

.pagination-disabled i {
  cursor: default;
  color: #aaa;
}

.table-generic td .yes-no {
  color: #333; 
  cursor: default;
}

.table-generic td .fa-minus {
  font-size: 8px; 
}

.yes-no-cell {
  text-align: center !important;
  padding-right: 32px !important;
  color: transparent;
}

.table-generic td .input-text {
  height: 30px; 
  margin-bottom: 0;
  width: 118px;
  background-color: #fff;
}

.input-amount {
  text-align: right; 
  padding-right: 28px !important;
}

.input-amount-row {
  position: relative;
}

.spinner-table {
  top: 8px !important;
  right: 12px !important;
}

.table-view-link {
  color: #0099ff; 
  font-weight: 700;
  text-decoration: none;
}

.table-view-link:hover {
  text-decoration: underline;
}

.spinner-up i,
.spinner-down i {
  color: #777;
}

.spinner-up i:hover,
.spinner-down i:hover {
  color: #00c983;
}

.spinner-down i {
  transform: translateY(-1px); 
}

a:hover {
  color: #006BB3;
}

::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 8px;
  height: 8px;
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: rgba(0,0,0,.15);
}

.table-caption {
  margin-top: 24px; 
}

td .fa-check {
  margin-left: 1.5px; 
}

#table2 td {
  white-space: nowrap; 
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.11/css/all.css" integrity="sha384-p2jx59pefphTFIpeqCcISO9MdVfIm4pNnsL08A6v5vaQc4owkQqxMV8kg4Yvhaw/" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" rel="stylesheet">

<div class="dashed-wrapper">

<table class="table-generic" id="table1" data-shrinked="0" data-expanded="0">
  <tr class="first-row">
    <th class="table-action checkbox-action"><input type="checkbox" class="checkbox-input" checked><span class="checkbox"><i class="fas fa-check"></i></span></th>
    <th class="table-action table-action-last">Edit</th>
    <th class="table-sort" id="req-no">Request No.<i class="fas fa-sort"></i></th> 
    <th class="table-sort" id="emp-id">Employee ID<i class="fas fa-sort"></i></th> 
    <th class="table-sort" id="emp-name">Employee Name<i class="fas fa-sort"></i></th>  
    <th class="table-sort" id="fam-member">For Family<i class="fas fa-sort"></i></th> 
    <th class="table-sort" id="req-date">Request Date<i class="fas fa-sort"></i></th> 
    <th>Editable Example</th> 
    <th>Total Amount</th> 
    <th>Details</th>
    <th>Approval History</th> 
  </tr>
  <tr class="selectable-row">
    <td class="table-action checkbox-action"><input type="checkbox" class="checkbox-input" checked><span class="checkbox"><i class="fas fa-check"></i></span></td>
    <td class="icon table-action table-action-last"><i class="fas fa-pencil-alt"></i></td>
    <td>REI/TRAVEL/04/005</td> 
    <td>EMP004</td>
    <td>I Putu Yudi Haryasa</td>
    <td class="yes-no-cell">0<i class="fas fa-minus yes-no"></i></td>
    <td>04 May 2018</td>
    <td class="input-amount-row">
      <input class="input-amount input-text input-with-spinner money-input" type="text" value="0.00">
      <a />
      <div class="spinner-group amount-spinner-group spinner-table">
        <a class="spinner-up"><i class="fas fa-caret-up"></i></a>
        <a class="spinner-down"><i class="fas fa-caret-down"></i></a>
      </div>
    </td>
    <td class="money">300,000.00</td>
    <td><a class="button white-btn table-btn">See details</a></td>
    <td><a class="button white-btn table-btn">See approvals</a></td>
  </tr>
  <tr class="selectable-row">
    <td class="table-action checkbox-action"><input type="checkbox" class="checkbox-input" checked><span class="checkbox"><i class="fas fa-check"></i></span></td>
    <td class="icon table-action table-action-last"><i class="fas fa-pencil-alt"></i></td>
    <td>REI/MEDICAL/04/004</td>
    <td>EMP005</td>
    <td>Daniel Giovanni Gunawan</td>
    <td class="yes-no-cell">0<i class="fas fa-minus yes-no"></i></td>
    <td>04 May 2018</td>
    <td class="input-amount-row">
      <input class="input-amount input-text input-with-spinner money-input" type="text" value="0.00">
      <a />
      <div class="spinner-group amount-spinner-group spinner-table">
        <a class="spinner-up"><i class="fas fa-caret-up"></i></a>
        <a class="spinner-down"><i class="fas fa-caret-down"></i></a>
      </div>
    </td>
    <td class="money">550,000.00</td>
    <td><a class="button white-btn table-btn">See details</a></td>
    <td><a class="button white-btn table-btn">See approvals</a></td>
  </tr>
  <tr class="selectable-row">
    <td class="table-action checkbox-action"><input type="checkbox" class="checkbox-input" checked><span class="checkbox"><i class="fas fa-check"></i></span></td>
    <td class="icon table-action table-action-last"><i class="fas fa-pencil-alt"></i></td>
    <td>REI/MEDICAL/04/003</td> 
    <td>EMP006</td>
    <td>Muhammad Nadzeri Munawar</td>
    <td class="yes-no-cell">1<i class="fas fa-check yes-no"></i></td>
    <td>03 May 2018</td>
    <td class="input-amount-row">
      <input class="input-amount input-text input-with-spinner money-input" type="text" value="0.00">
      <a />
      <div class="spinner-group amount-spinner-group spinner-table">
        <a class="spinner-up"><i class="fas fa-caret-up"></i></a>
        <a class="spinner-down"><i class="fas fa-caret-down"></i></a>
      </div>
    </td>
    <td class="money">4,500,000.00</td>
    <td><a class="button white-btn table-btn">See details</a></td>
    <td><a class="button white-btn table-btn">See approvals</a></td>
  </tr>
  <tr class="selectable-row">
    <td class="table-action checkbox-action"><input type="checkbox" class="checkbox-input" checked><span class="checkbox"><i class="fas fa-check"></i></span></td>
    <td class="icon table-action table-action-last"><i class="fas fa-pencil-alt"></i></td>
    <td>REI/MEDICAL/03/002</td> 
    <td>EMP007</td>
    <td>Glenn Kristanto</td>
    <td class="yes-no-cell">1<i class="fas fa-check yes-no"></i></td>
    <td>02 May 2018</td>
    <td class="input-amount-row">
      <input class="input-amount input-text input-with-spinner money-input" type="text" value="0.00">
      <a />
      <div class="spinner-group amount-spinner-group spinner-table">
        <a class="spinner-up"><i class="fas fa-caret-up"></i></a>
        <a class="spinner-down"><i class="fas fa-caret-down"></i></a>
      </div>
    </td>
    <td class="money">3,000,000.00</td>
    <td><a class="button white-btn table-btn">See details</a></td>
    <td><a class="button white-btn table-btn">See approvals</a></td>
  </tr>
  <tr class="selectable-row">
    <td class="table-action checkbox-action"><input type="checkbox" class="checkbox-input" checked><span class="checkbox"><i class="fas fa-check"></i></span></td>
    <td class="icon table-action table-action-last"><i class="fas fa-pencil-alt"></i></td>
    <td>REI/TRAVEL/03/001</td> 
    <td>EMP008</td>
    <td>Hendryanto Fudiko</td>
    <td class="yes-no-cell">0<i class="fas fa-minus yes-no"></i></td>
    <td>02 May 2018</td>
    <td class="input-amount-row">
      <input class="input-amount input-text input-with-spinner money-input" type="text" value="0.00">
      <a />
      <div class="spinner-group amount-spinner-group spinner-table">
        <a class="spinner-up"><i class="fas fa-caret-up"></i></a>
        <a class="spinner-down"><i class="fas fa-caret-down"></i></a>
      </div>
    </td>
    <td class="money">150,000.00</td>
    <td><a class="button white-btn table-btn">See details</a></td>
    <td><a class="button white-btn table-btn">See approvals</a></td>
  </tr>
  <tr class="selectable-row">
    <td class="table-action checkbox-action"><input type="checkbox" class="checkbox-input" checked><span class="checkbox"><i class="fas fa-check"></i></span></td>
    <td class="icon table-action table-action-last"><i class="fas fa-pencil-alt"></i></td>
    <td>REI/TRAVEL/02/001</td> 
    <td>EMP004</td>
    <td>I Putu Yudi Haryasa</td>
    <td class="yes-no-cell">0<i class="fas fa-minus yes-no"></i></td>
    <td>28 Apr 2018</td>
    <td class="input-amount-row">
      <input class="input-amount input-text input-with-spinner money-input" type="text" value="0.00">
      <a />
      <div class="spinner-group amount-spinner-group spinner-table">
        <a class="spinner-up"><i class="fas fa-caret-up"></i></a>
        <a class="spinner-down"><i class="fas fa-caret-down"></i></a>
      </div>
    </td>
    <td class="money">300,000.00</td>
    <td><a class="button white-btn table-btn">See details</a></td>
    <td><a class="button white-btn table-btn">See approvals</a></td>
  </tr>
  <tr class="selectable-row">
    <td class="table-action checkbox-action"><input type="checkbox" class="checkbox-input" checked><span class="checkbox"><i class="fas fa-check"></i></span></td>
    <td class="icon table-action table-action-last"><i class="fas fa-pencil-alt"></i></td>
    <td>REI/MEDICAL/01/005</td>
    <td>EMP021</td>
    <td>Daniel Widjaja</td>
    <td class="yes-no-cell">0<i class="fas fa-minus yes-no"></i></td>
    <td>25 Apr 2018</td>
    <td class="input-amount-row">
      <input class="input-amount input-text input-with-spinner money-input" type="text" value="0.00">
      <a />
      <div class="spinner-group amount-spinner-group spinner-table">
        <a class="spinner-up"><i class="fas fa-caret-up"></i></a>
        <a class="spinner-down"><i class="fas fa-caret-down"></i></a>
      </div>
    </td>
    <td class="money">550,000.00</td>
    <td><a class="button white-btn table-btn">See details</a></td>
    <td><a class="button white-btn table-btn">See approvals</a></td>
  </tr>
  <tr class="selectable-row">
    <td class="table-action checkbox-action"><input type="checkbox" class="checkbox-input" checked><span class="checkbox"><i class="fas fa-check"></i></span></td>
    <td class="icon table-action table-action-last"><i class="fas fa-pencil-alt"></i></td>
    <td>REI/MEDICAL/01/004</td> 
    <td>EMP020</td>
    <td>Faris Kurniawan</td>
    <td class="yes-no-cell">1<i class="fas fa-check yes-no"></i></td>
    <td>25 Apr 2018</td>
    <td class="input-amount-row">
      <input class="input-amount input-text input-with-spinner money-input" type="text" value="0.00">
      <a />
      <div class="spinner-group amount-spinner-group spinner-table">
        <a class="spinner-up"><i class="fas fa-caret-up"></i></a>
        <a class="spinner-down"><i class="fas fa-caret-down"></i></a>
      </div>
    </td>
    <td class="money">4,500,000.00</td>
    <td><a class="button white-btn table-btn">See details</a></td>
    <td><a class="button white-btn table-btn">See approvals</a></td>
  </tr>
  <tr class="selectable-row">
    <td class="table-action checkbox-action"><input type="checkbox" class="checkbox-input" checked><span class="checkbox"><i class="fas fa-check"></i></span></td>
    <td class="icon table-action table-action-last"><i class="fas fa-pencil-alt"></i></td>
    <td>REI/ENTERTAINMENT/01/002</td> 
    <td>EMP015</td>
    <td>Romy Kusuma</td>
    <td class="yes-no-cell">1<i class="fas fa-check yes-no"></i></td>
    <td>11 Apr 2018</td>
    <td class="input-amount-row">
      <input class="input-amount input-text input-with-spinner money-input" type="text" value="0.00">
      <a />
      <div class="spinner-group amount-spinner-group spinner-table">
        <a class="spinner-up"><i class="fas fa-caret-up"></i></a>
        <a class="spinner-down"><i class="fas fa-caret-down"></i></a>
      </div>
    </td>
    <td class="money">3,000,000.00</td>
    <td><a class="button white-btn table-btn">See details</a></td>
    <td><a class="button white-btn table-btn">See approvals</a></td>
  </tr>
  <tr class="selectable-row">
    <td class="table-action checkbox-action"><input type="checkbox" class="checkbox-input" checked><span class="checkbox"><i class="fas fa-check"></i></span></td>
    <td class="icon table-action table-action-last"><i class="fas fa-pencil-alt"></i></td>
    <td>REI/ENTERTAINMENT/01/001</td> 
    <td>EMP006</td>
    <td>Muhammad Nadzeri Munawar</td>
    <td class="yes-no-cell">0<i class="fas fa-minus yes-no"></i></td>
    <td>09 Apr 2018</td>
    <td class="input-amount-row">
      <input class="input-amount input-text input-with-spinner money-input" type="text" value="0.00">
      <a />
      <div class="spinner-group amount-spinner-group spinner-table">
        <a class="spinner-up"><i class="fas fa-caret-up"></i></a>
        <a class="spinner-down"><i class="fas fa-caret-down"></i></a>
      </div>
    </td>
    <td class="money">150,000.00</td>
    <td><a class="button white-btn table-btn">See details</a></td>
    <td><a class="button white-btn table-btn">See approvals</a></td>
  </tr>
</table>

<!--<div class="table-pagination">
  <ul class="table-pagination-btn">
    <li class="table-pagination-btn-each pagination-disabled"><i class="fas fa-chevron-left"></i><i class="fas fa-chevron-left"></i></li>
    <li class="table-pagination-btn-each pagination-disabled"><i class="fas fa-chevron-left"></i></li>
    <li class="table-pagination-btn-each selected-page">1</li>
    <li class="table-pagination-btn-each">2</li>
    <li class="table-pagination-btn-each">3</li>
    <li class="table-pagination-btn-each"><i class="fas fa-chevron-right"></i></li>
    <li class="table-pagination-btn-each"><i class="fas fa-chevron-right"></i><i class="fas fa-chevron-right"></i></li>
  </ul>
</div>-->
  
<div class="caption table-caption">Multi-select rows without link</div>
  
<table class="table-generic" id="table2" data-shrinked="0" data-expanded="0">
  <tr class="first-row">
    <th class="table-sort" id="emp-id2">Employee ID<i class="fas fa-sort"></i></th> 
    <th class="table-sort" id="emp-name2">Employee Name<i class="fas fa-sort"></i></th>  
    <th class="table-sort" id="emp-type">Employment Type<i class="fas fa-sort"></i></th> 
    <th class="table-sort" id="start-date">Start Date<i class="fas fa-sort"></i></th> 
    <th class="table-sort" id="organization">Organization<i class="fas fa-sort"></i></th> 
    <th class="table-sort" id="job-title">Job Title<i class="fas fa-sort"></i></th> 
    <th>Action Example</th> 
  </tr>
  <tr class="selectable-row">
    <td>EMP001</td>
    <td><a href="#" class="table-view-link">Eric Jessen</a></td>
    <td>Permanent</td>
    <td>01 Jan 2016</td>
    <td>ICT</td>
    <td>Software Development Engineer</td>
    <td><a class="button green-btn table-btn">Download</a></td>
  </tr>
  <tr class="selectable-row">
    <td>EMP002</td>
    <td><a href="#" class="table-view-link">Andi</a></td>
    <td>Permanent</td>
    <td>01 Jan 2016</td>
    <td>ICT</td>
    <td>Software Development Engineer</td>
    <td><a class="button green-btn table-btn">Download</a></td>
  </tr>
  <tr class="selectable-row">
    <td>EMP003</td>
    <td><a href="#" class="table-view-link">Felix Adhinata</a></td>
    <td>Permanent</td>
    <td>01 Jul 2016</td>
    <td>ICT</td>
    <td>Software Development Engineer</td>
    <td><a class="button green-btn table-btn">Download</a></td>
  </tr>
  <tr class="selectable-row">
    <td>EMP004</td>
    <td><a href="#" class="table-view-link">Ricky Yudianto</a></td>
    <td>Permanent</td>
    <td>01 Jul 2016</td>
    <td>ICT</td>
    <td>Software Development Engineer</td>
    <td><a class="button green-btn table-btn">Download</a></td>
  </tr>
  <tr class="selectable-row">
    <td>EMP005</td>
    <td><a href="#" class="table-view-link">Stefanie Suanita</a></td>
    <td>Permanent</td>
    <td>01 Jan 2016</td>
    <td>ICT</td>
    <td>Project Manager</td>
    <td><a class="button green-btn table-btn">Download</a></td>
  </tr>
  <tr class="selectable-row">
    <td>EMP006</td>
    <td><a href="#" class="table-view-link">Dinna Amelina</a></td>
    <td>Permanent</td>
    <td>01 Jan 2016</td>
    <td>ICT</td>
    <td>Project Manager</td>
    <td><a class="button green-btn table-btn">Download</a></td>
  </tr>
  <tr class="selectable-row">
    <td>EMP007</td>
    <td><a href="#" class="table-view-link">Stella Kurniawan</a></td>
    <td>Permanent</td>
    <td>01 Jul 2016</td>
    <td>ICT</td>
    <td>Project Manager</td>
    <td><a class="button green-btn table-btn">Download</a></td>
  </tr>
  <tr class="selectable-row">
    <td>EMP008</td>
    <td><a href="#" class="table-view-link">Monika Sembiring</a></td>
    <td>Permanent</td>
    <td>01 Jul 2016</td>
    <td>ICT</td>
    <td>Project Manager</td>
    <td><a class="button green-btn table-btn">Download</a></td>
  </tr>
  <tr class="selectable-row">
    <td>EMP009</td>
    <td><a href="#" class="table-view-link">Melina Mayella Sujono</a></td>
    <td>Permanent</td>
    <td>01 Jan 2016</td>
    <td>ICT</td>
    <td>UX Designer</td>
    <td><a class="button green-btn table-btn">Download</a></td>
  </tr>
  <tr class="selectable-row">
    <td>EMP010</td>
    <td><a href="#" class="table-view-link">Fransiska Handayani</a></td>
    <td>Permanent</td>
    <td>01 Jan 2016</td>
    <td>ICT</td>
    <td>UX Designer</td>
    <td><a class="button green-btn table-btn">Download</a></td>
  </tr>
</table>

<!--<div class="table-pagination">
  <ul class="table-pagination-btn">
    <li class="table-pagination-btn-each pagination-disabled"><i class="fas fa-chevron-left"></i><i class="fas fa-chevron-left"></i></li>
    <li class="table-pagination-btn-each pagination-disabled"><i class="fas fa-chevron-left"></i></li>
    <li class="table-pagination-btn-each selected-page">1</li>
    <li class="table-pagination-btn-each">2</li>
    <li class="table-pagination-btn-each">3</li>
    <li class="table-pagination-btn-each"><i class="fas fa-chevron-right"></i></li>
    <li class="table-pagination-btn-each"><i class="fas fa-chevron-right"></i><i class="fas fa-chevron-right"></i></li>
  </ul>
</div>-->
  
<div class="caption table-caption">Non-selectable rows with link</div>

</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

我的问题是，如何将大表缩小到恰好1302px？只要行高跟随文本高度，垂直文本溢出就可以。而且，我可以在大于1302px的屏幕上使表格与屏幕居中对齐吗？

任何帮助表示赞赏！

2 个答案:

答案 0 :(得分：1)

用div包裹表格。 div为1302px，表格为100％宽度

答案 1 :(得分：1)

使表格居中

<div style="width:100%">
<div style="width:1302px">
 <table style="width:100%"></table></div>
</div>

这样，您的表格将始终为1302px并始终居中。

相关问题
最新问题