Question

我有一个.xsl文件来创建4个表。问题是：所有表的内容将通过.xml文件自动插入，因此它们不是固定的。在下面的示例中，我插入某些内容，您看到所有表的宽度不相等，表也不会停留在页面的中间。

我应该如何更新下面的CSS部分，以便对于任何插入的内容，所有4个表具有相同的宽度并保持在页面的中间？

.frame {
    font-family: Verdana;
}
				
.div1 {
    margin-right:80px;
    margin-left:80px;
}
				
.div2 {
    margin-right:80px;
    margin-left:80px;
}
				
.div3 {
    margin-right:80px;
    margin-left:80px;
}
				
.div4 {
    margin-right:80px;
    margin-left:80px;
}
				
.table1 {
    width: 760px;
    margin: 0 auto;
    border-collapse: collapse;
    font-weight: bold;
}	
.table1 td {
    vertical-align: top;
    padding-left: 6px;
    padding-bottom: 5px;
    border: 1px solid black;
    width: 380px;  
}
.table1 tr:nth-child(2) td {
    border: none;
}
				
.table2 {
    width: 760px;
    margin: 0 auto;
    border-collapse: collapse;
}			
.table2 th {
    vertical-align: top;
    border: 1px solid black;
    text-align: left;
    padding-left: 6px;
    font-weight: bold;
    background-color: rgb(0,116,188);
    color: white;
}
.table2 td {
    vertical-align: top;
    padding-left: 6px;
    padding-bottom: 5px;
    border: 1px solid black;
}
.table2 tr:nth-child(1) td {
    border: none;
}
.table2 tr:nth-child(2) td {
    border: none;
}
.table2 tr:nth-last-child() td {
    border: none;
}
.table2 tr:nth-last-child(1) td {
    border: none;
}
				
.table3 {
    vertical-align: top;
    width: 760px;
    margin: 0 auto;
    border-collapse: collapse;
}
.table3 th {
    vertical-align: top;
    border: 1px solid black;
    text-align: left;
    padding-left: 6px;
    font-weight: bold;
    background-color: rgb(0,116,188);
    color: white;
}
.table3 td {
    vertical-align: top;
    padding-left: 6px;
    padding-bottom: 5px;
    border: 1px solid black;
}
.table3 tr:nth-child(1) td {
    border: none;
}
.table3 tr:nth-child(2) td {
    border: none;
}
.table3 tr:nth-child(3) td {
    border: none;
}
.table3 tr:nth-child(4) td {
    border: none;
}
.table3 tr:nth-child(5) td {
    border: none;
}
.table3 tr:nth-last-child() td {
    border: none;
}
.table3 tr:nth-last-child(1) td {
    border: none;
}
				
.table4 {
    vertical-align: top;
    width: 760px;
    margin: 0 auto;
    border-collapse: collapse;
}			
.table4 th {
    vertical-align: top;
    border: 1px solid black;
    text-align: left;
    padding-left: 6px;
    font-weight: bold;
    background-color: rgb(0,116,188);
    color: white;
}
.table4 td {
    vertical-align: top;
    padding-left: 6px;
    padding-bottom: 5px;
    border: 1px solid black;
}
.table4 tr:nth-child(1) td {
    border: none;
}
.table4 tr:nth-child(2) td {
    border: none;
}

<div class="frame">
  <div class="div1">
    <table class="table1" style="margin-top:20px">
      <tr>
         <td>Contract</td>
         <td>ABC XYZ</td>
      </tr>
      <tr>
         <td> <br/> </td>
         <td> <br/> </td>
      </tr>
      <tr>
         <td>Informations about Patients of</td>
         <td>Dr. William Hills (ID: 123456789)</td>
      </tr>
      <tr>
         <td>Quartal/Year of treated Patient</td>
         <td>Q4-2016</td>
      </tr>
      <tr>
         <td>Treatment carried out by</td>
         <td>Dr. William Hills (ID: 123456789)</td>
      </tr>
      <tr>
         <td>Start date Import</td>
         <td>201610011335</td>
      </tr>
      <tr>
         <td>Quantity of enrolled Patients</td>
         <td>126</td>
      </tr>
    </table>
  </div>
  <br/>
  <br/>
  <div class="div2">
    <table class="table2" style="font-size:12pt">
      <tr>
         <td colspan="7" style="font-weight: bold; color:rgb(0,116,188)">Changes of following patients</td>
           </tr>
           <tr>
              <td colspan="7"/>
           </tr>
           <tr>
              <th>Name</th>
              <th>Birthday</th>
              <th>Insurance No.</th>
              <th>Contractstatus</th>
              <th>Begin date</th>
              <th>End date</th>
              <th>Reason</th>
           </tr>
           <tr>
              <td>Frank Harrison</td>
              <td>01.12.1959</td>
              <td>G987654321</td>
              <td>
                 <b>Activated</b>
              </td>
              <td>
                 <b>01.04.2017</b>
              </td>
              <td/>
              <td/>
           </tr>
           <tr>
              <td>Peter Smith</td>
              <td>04.12.1969</td>
              <td>G543267sfgsfgsgdgdfgssgs7895642gfdfsfsfsd89</td>
              <td>
                 <b>Terminated</b>
              </td>
              <td>01.01.2016</td>
              <td>
                 <b>31.03.2017</b>
              </td>
              <td>Cancelled</td>
           </tr>
           <tr>
              <td colspan="7"> Some notations here</td>
           </tr>
        </table>
  </div>
  <br/>
  <br/>
  <div class="div3">
    <table class="table3" style="font-size:12pt">
        <tr>
           <td colspan="6" style="margin-left:80px; font-weight:bold; color:rgb(0,116,188)">Title of second table</td>
        </tr>
        <tr>
           <td colspan="6"/>
        </tr>
        <tr>
           <td colspan="6">101 Dalmatians is a 1996 American live-action family comedy film based on Walt Disney's animated 1961 movie adaptation of Dodie Smith's 1956 novel The Hundred and One Dalmatians. Directed by Stephen Herek and co-produced by John Hughes and Ricardo Mestres, it stars Glenn Close, Hugh Laurie, Mark Williams, Tim McInnerny, Jeff Daniels and Joely Richardson. In contrast with the 1961 film, none of the animals talk in this version. Released on November 27, 1996 by Walt Disney Pictures, the film was praised for its faithfulness to the animated classic. It received mixed reviews, but was a commercial success, grossing $320.6 million in theaters against a $75 million budget. </td>
        </tr>
        <tr>
           <td colspan="6"/>
        </tr>
        <tr>
           <td colspan="6"> </td>
        </tr>
        <tr>
           <th>Name</th>
           <th>Birthday</th>
           <th>Insurance No.</th>
           <th>Office</th>
           <th>Date for Q4-2016</th>
           <th>Reason</th>
        </tr>
        <tr>
           <td>Adolph_Blaine_Charles_David_Earl_Frederick_Gerald_Hubert_Irvin_ John Kenneth Lloyd Martin Nero Oliver Paul</td>
           <td>04.12.1969</td>
           <td>G543996789</td>
           <td>Activated<br/>
              <b>01.07.2016</b>
           </td>
           <td>Activated<br/>
              <b>01.04.2016</b>
              <br/>
           </td>
           <td/>
        </tr>
        <tr>
           <td>Peter Tester</td>
           <td>01.12.1959</td>
           <td>G987677321</td>
           <td>
              <b>Activated</b>
              <br/>01.01.2016</td>
           <td>
              <b>Terminated</b>
              <br/>
              <b>01.01.2016</b>
              <br/>
              <b>30.06.2016</b>
           </td>
           <td>Late feedback about changing the residence</td>
        </tr>
        <tr>
           <td colspan="6"> Some notations here</td>
        </tr>
    </table>
  </div>
  <br/>
  <br/>
  <div class="div4">
    <table class="table4" style="font-size:12pt">
        <tr>
           <td colspan="4" style="font-weight: bold; color:rgb(0,116,188)">Title of third table</td>
        </tr>
        <tr>
           <td colspan="4"/>
        </tr>
        <tr>
           <th>Name</th>
           <th>Birthday</th>
           <th>Insurance No.</th>
           <th>Notice</th>
        </tr>
        <tr>
           <td>Fritz Ford</td>
           <td>30.01.1965</td>
           <td>D555555555</td>
           <td>PTD</td>
        </tr>
    </table>
  </div>
</div>

Answer 1

快速而肮脏的解决方案是在所有表格上添加table-layout:fixed;width:100%。这样，宽度将始终为100％，表格单元格内容将换行。请记住，添加table-layout:fixed会使所有表格单元格具有相同的宽度。

当然，如果你的表太长，你需要使用javascript来实现你的目标。

为每个表设置相同的宽度，而每个表中的内容长度不相等？

1 个答案: