为什么我的各种HTML表都有不同的宽度？

时间：2016-03-16 17:11:22

标签： html css

我一直在开发这个模板HTML文件，我遇到了一个问题。

理想情况下，在所有表中，左列（0:00）应始终具有相同的大小。并且2 名称列应始终具有相同的大小。然后主题列应该占用空间。

在我的IE浏览器中，这些列显示的宽度不同。我的错是什么？

＆＃13;
＆＃13; 
class Parent extends Component {
 constructor() { /* ... */ }
 myCallback(text) { console.log(this, text); }

 render() {
   return (
     <Child callbacks={{cb1: this.myCallback.bind(this)}} />
   );
 }
}

class Child extends Component {
 constructor() { /* ... */ }
 onClick(e) {
   // ...
   this.props.callbacks.cb1.call(this, 'Hello from child');
 }

 render() {
   return (
     <a href='#' onClick={this.onClick.bind(this)}>Link</a>
   );
 }
}
＆＃13; 
.cellBibleReading {
  padding-left: 3mm;
  font-family: Calibri;
  font-size: 11pt;
  font-weight: 700;
}
.cellTime {
  padding-left: 3mm;
  padding-right: 5mm;
  font-family: Calibri;
  font-size: 9pt;
  font-weight: 700;
  color: gray;
}
.cellName {
  font-family: Calibri;
  font-size: 11pt;
  font-weight: normal;
}
.floatRight {
  color: gray;
  padding-top: 1mm;
  padding-bottom: 1mm;
  padding-right: 2mm;
  float: right;
  text-align: right;
  font-family: Calibri;
  font-size: 8pt;
  font-weight: 700;
}
.tableDATE {
  margin-bottom: 2mm;
  border-collapse: collapse;
  width: 100%;
  border: thin black solid;
}
.tableDATE td {
  border: thin black solid;
}
.tableTFGW {
  margin-bottom: 2mm;
  border-collapse: collapse;
  width: 100%;
  border: thin black solid;
}
.tableTFGW td {
  border: thin black solid;
}
.cellTFGW {
  padding-left: 1mm;
}
.textTFGW {
  padding-left: 1mm;
  padding-top: 1mm;
  padding-bottom: 1mm;
  background-color: #606a70;
  width: 90mm;
  font-family: Calibri;
  font-size: 10pt;
  font-weight: 700;
}
.bulletTFGW {
  padding-top: 1mm;
  padding-bottom: 1mm;
  padding-right: 1mm;
  color: #606a70;
  font-size: 14pt;
  font-family: Calibri;
  font-weight: normal;
}
.tableAYFM {
  margin-bottom: 2mm;
  border-collapse: collapse;
  width: 100%;
  border: thin black solid;
}
.tableAYFM td {
  border: thin black solid;
}
.cellAYFM {
  padding-left: 1mm;
}
.textAYFM {
  padding-left: 1mm;
  padding-top: 1mm;
  padding-bottom: 1mm;
  background-color: #c18626;
  width: 90mm;
  font-family: Calibri;
  font-size: 10pt;
  font-weight: 700;
}
.bulletAYFM {
  padding-top: 1mm;
  padding-bottom: 1mm;
  padding-right: 1mm;
  color: #c18626;
  font-size: 14pt;
  font-family: Calibri;
  font-weight: normal;
}
.cellClass {
  font-size: 8pt;
  font-family: Calibri;
  font-weight: 700;
  vertical-align: bottom;
  color: gray;
}
.tableLAC {
  margin-bottom: 2mm;
  border-collapse: collapse;
  width: 100%;
  border: thin black solid;
}
.tableLAC td {
  border: thin black solid;
}
.cellLAC {
  padding-left: 1mm;
}
.textLAC {
  padding-left: 1mm;
  padding-top: 1mm;
  padding-bottom: 1mm;
  background-color: #961526;
  width: 90mm;
  font-family: Calibri;
  font-size: 10pt;
  font-weight: 700;
}
.bulletLAC {
  padding-top: 1mm;
  padding-bottom: 1mm;
  padding-right: 1mm;
  color: #961526;
  font-size: 14pt;
  font-family: Calibri;
  font-weight: normal;
}
.textDuration {
  padding-left: 1mm;
  font-family: Calibri;
  font-size: 9pt;
  font-weight: normal;
}
.textTheme {
  font-family: Calibri;
  font-size: 11pt;
  font-weight: normal;
}
.textSongLabel {
  font-family: Calibri;
  font-size: 11pt;
  font-weight: normal;
}
.textSongNumber {
  font-family: Calibri;
  font-size: 12pt;
  font-weight: normal;
}
.textCongregation {
  text-align: left;
  font-family: Cambria;
  font-size: 11pt;
  font-weight: 700;
}
.textTitle {
  text-align: right;
  font-family: Cambria;
  font-size: 18pt;
  font-weight: 700;
}
.tableHeading {
  width: 100%;
  margin-bottom: 5mm;
  border-bottom: thin black double;
}
.tableHeading td {
  vertical-align: bottom;
}
＆＃13;
＆＃13;
＆＃13;

以下是我在浏览器中看到的示例：

左栏：

Left column differs

右栏：

Right column differs

2 个答案:

答案 0 :(得分：3)

要将固定宽度设置为表格，您需要将table-layout设置为fixed

第一个单元格在这里太短了

你可以设置一个宽度为第一个col和最后一个col，第二个将填充剩下的，它将允许你在第一列上的st px或em和在最后两个上的百分比

table {
  table-layout:fixed;
  }
.cellBibleReading {
  padding-left: 3mm;
  font-family: Calibri;
  font-size: 11pt;
  font-weight: 700;
}
.cellTime {
  padding-left: 3mm;
  padding-right: 5mm;
  font-family: Calibri;
  font-size: 9pt;
  font-weight: 700;
  color: gray;
}
.cellName {
  font-family: Calibri;
  font-size: 11pt;
  font-weight: normal;
}
.floatRight {
  color: gray;
  padding-top: 1mm;
  padding-bottom: 1mm;
  padding-right: 2mm;
  float: right;
  text-align: right;
  font-family: Calibri;
  font-size: 8pt;
  font-weight: 700;
}
.tableDATE {
  margin-bottom: 2mm;
  border-collapse: collapse;
  width: 100%;
  border: thin black solid;
}
.tableDATE td {
  border: thin black solid;
}
.tableTFGW {
  margin-bottom: 2mm;
  border-collapse: collapse;
  width: 100%;
  border: thin black solid;
}
.tableTFGW td {
  border: thin black solid;
}
.cellTFGW {
  padding-left: 1mm;
}
.textTFGW {
  padding-left: 1mm;
  padding-top: 1mm;
  padding-bottom: 1mm;
  background-color: #606a70;
  width: 90mm;
  font-family: Calibri;
  font-size: 10pt;
  font-weight: 700;
}
.bulletTFGW {
  padding-top: 1mm;
  padding-bottom: 1mm;
  padding-right: 1mm;
  color: #606a70;
  font-size: 14pt;
  font-family: Calibri;
  font-weight: normal;
}
.tableAYFM {
  margin-bottom: 2mm;
  border-collapse: collapse;
  width: 100%;
  border: thin black solid;
}
.tableAYFM td {
  border: thin black solid;
}
.cellAYFM {
  padding-left: 1mm;
}
.textAYFM {
  padding-left: 1mm;
  padding-top: 1mm;
  padding-bottom: 1mm;
  background-color: #c18626;
  width: 90mm;
  font-family: Calibri;
  font-size: 10pt;
  font-weight: 700;
}
.bulletAYFM {
  padding-top: 1mm;
  padding-bottom: 1mm;
  padding-right: 1mm;
  color: #c18626;
  font-size: 14pt;
  font-family: Calibri;
  font-weight: normal;
}
.cellClass {
  font-size: 8pt;
  font-family: Calibri;
  font-weight: 700;
  vertical-align: bottom;
  color: gray;
}
.tableLAC {
  margin-bottom: 2mm;
  border-collapse: collapse;
  width: 100%;
  border: thin black solid;
}
.tableLAC td {
  border: thin black solid;
}
.cellLAC {
  padding-left: 1mm;
}
.textLAC {
  padding-left: 1mm;
  padding-top: 1mm;
  padding-bottom: 1mm;
  background-color: #961526;
  width: 90mm;
  font-family: Calibri;
  font-size: 10pt;
  font-weight: 700;
}
.bulletLAC {
  padding-top: 1mm;
  padding-bottom: 1mm;
  padding-right: 1mm;
  color: #961526;
  font-size: 14pt;
  font-family: Calibri;
  font-weight: normal;
}
.textDuration {
  padding-left: 1mm;
  font-family: Calibri;
  font-size: 9pt;
  font-weight: normal;
}
.textTheme {
  font-family: Calibri;
  font-size: 11pt;
  font-weight: normal;
}
.textSongLabel {
  font-family: Calibri;
  font-size: 11pt;
  font-weight: normal;
}
.textSongNumber {
  font-family: Calibri;
  font-size: 12pt;
  font-weight: normal;
}
.textCongregation {
  text-align: left;
  font-family: Cambria;
  font-size: 11pt;
  font-weight: 700;
}
.textTitle {
  text-align: right;
  font-family: Cambria;
  font-size: 18pt;
  font-weight: 700;
}
.tableHeading {
  width: 100%;
  margin-bottom: 5mm;
  border-bottom: thin black double;
}
.tableHeading td {
  vertical-align: bottom;
}
<table class="tableHeading">
  <colgroup>
    <col width="50%">
      <col width="50%">
  </colgroup>
  <tr>
    <td class="textCongregation">CONGREGATION NAME</td>
    <td class="textTitle">Midweek Meeting Schedule</td>
  </tr>
</table>
<table class="tableDATE">
  <colgroup>
    <col width="2%">
      <col width="78%">
        <col width="20%">
  </colgroup>
  <tr>
    <td class="cellBibleReading" colspan="2">
      <div class="floatRight">
        Chairman:</div>
      DATE | WEEKLY BIBLE READING</td>
    <td class="cellName">Name</td>
  </tr>
  <tr>
    <td class="cellBibleReading" colspan="2">
      <div class="floatRight">
        Auxiliary Classroom Counselor:</div>
      &nbsp;</td>
    <td class="cellName">Name</td>
  </tr>
  <tr>
    <td colspan="3">&nbsp;</td>
  </tr>
  <tr>
    <td class="cellTime">0:00</td>
    <td>
      <div class="floatRight">
        Prayer:</div>
      <span class="bulletTFGW">&bull;</span><span class="textSongLabel">Song</span>
      <span class="textSongNumber">XXX</span>
    </td>
    <td class="cellName">Name</td>
  </tr>
  <tr>
    <td class="cellTime">0:00</td>
    <td colspan="2"><span class="textTheme">Opening Comments</span><span class="textDuration">(3 
    		min. or less)</span>
    </td>
  </tr>
</table>
<table class="tableDATE">
  <colgroup>
    <col width="2%">
      <col width="78%">
        <col width="20%">
  </colgroup>
  <tr>
    <td class="cellBibleReading" colspan="2">
      <div class="floatRight">
        Chairman:</div>
      DATE | WEEKLY BIBLE READING</td>
    <td class="cellName">Name</td>
  </tr>
  <tr>
    <td colspan="3">&nbsp;</td>
  </tr>
  <tr>
    <td class="cellTime">0:00</td>
    <td>
      <div class="floatRight">
        Prayer:</div>
      <span class="bulletTFGW">&bull;</span><span class="textSongLabel">Song</span>
      <span class="textSongNumber">XXX</span>
    </td>
    <td class="cellName">Name</td>
  </tr>
  <tr>
    <td class="cellTime">0:00</td>
    <td colspan="2"><span class="textTheme">Opening Comments</span><span class="textDuration">(3 
    		min. or less)</span>
    </td>
  </tr>
</table>
<table class="tableTFGW">
  <colgroup>
    <col width="2%">
      <col width="78%">
        <col width="20%">
  </colgroup>
  <tr>
    <td class="cellTFGW" colspan="2" style="width: 60%">
      <div class="textTFGW">
        TREASURES FROM GOD'S WORD</div>
    </td>
    <td class="cellClass">Main Hall</td>
  </tr>
  <tr>
    <td class="cellTime">0:00</td>
    <td><span class="bulletTFGW">&bull;</span>  <span class="textTheme">Title</span>
      <span class="textDuration">(10 min.)</span> 
    </td>
    <td class="cellName">Name</td>
  </tr>
  <tr>
    <td class="cellTime">0:00</td>
    <td><span class="bulletTFGW">&bull;</span>  <span class="textTheme">Digging 
    		for Spiritual gems</span>  <span class="textDuration">(8 min.)</span>
    </td>
    <td class="cellName">Name</td>
  </tr>
  <tr>
    <td class="cellTime">0:00</td>
    <td>
      <div class="floatRight">
        Student:</div>
      <span class="bulletTFGW">&bull;</span>  <span class="textTheme">Bible Reading</span>
      <span class="textDuration">(4 min. or less)</span> 
    </td>
    <td class="cellName">Name</td>
  </tr>
</table>
<table class="tableTFGW">
  <colgroup>
    <col width="2%">
      <col width="58%">
        <col width="20%">
          <col width="20%">
  </colgroup>
  <tr>
    <td class="cellTFGW" colspan="2" style="width: 60%">
      <div class="textTFGW">
        TREASURES FROM GOD'S WORD</div>
    </td>
    <td class="cellClass">Auxiliary Classroom</td>
    <td class="cellClass">Main Hall</td>
  </tr>
  <tr>
    <td class="cellTime">0:00</td>
    <td colspan="2"><span class="bulletTFGW">&bull;</span>
      <span class="textTheme">Title</span>  <span class="textDuration">(10 min.)</span>
    </td>
    <td class="cellName">Name</td>
  </tr>
  <tr>
    <td class="cellTime">0:00</td>
    <td colspan="2"><span class="bulletTFGW">&bull;</span>
      <span class="textTheme">Digging for Spiritual gems</span>
      <span class="textDuration">(8 min.)</span> 
    </td>
    <td class="cellName">Name</td>
  </tr>
  <tr>
    <td class="cellTime">0:00</td>
    <td>
      <div class="floatRight">
        Student:</div>
      <span class="bulletTFGW">&bull;</span>  <span class="textTheme">Bible Reading</span>
      <span class="textDuration">(4 min. or less)</span> 
    </td>
    <td class="cellName">Name</td>
    <td class="cellName">Name</td>
  </tr>
</table>
<table class="tableAYFM">
  <colgroup>
    <col width="2%">
      <col width="78%">
        <col width="20%">
  </colgroup>
  <tr>
    <td class="cellAYFM" colspan="3">
      <div class="textAYFM">
        APPLY YOURSELF TO THE FIELD MINISTRY</div>
    </td>
  </tr>
  <tr>
    <td class="cellTime">0:00</td>
    <td><span class="bulletAYFM">&bull;</span>  <span class="textTheme">Prepare 
    		This Month's Presentations</span>  <span class="textDuration">(15 min.)</span>
    </td>
    <td class="cellName">Name</td>
  </tr>
</table>
<table class="tableAYFM">
  <colgroup>
    <col width="2%">
      <col width="58%">
        <col width="20%">
          <col width="20%">
  </colgroup>
  <tr>
    <td class="cellAYFM" colspan="2" style="width: 60%">
      <div class="textAYFM">
        APPLY YOURSELF TO THE FIELD MINISTRY</div>
    </td>
    <td class="cellClass">Auxiliary Classroom</td>
    <td class="cellClass">Main Hall</td>
  </tr>
  <tr>
    <td class="cellTime">0:00</td>
    <td>
      <div class="floatRight">
        Student/Assistant:</div>
      <span class="bulletAYFM">&bull;</span>  <span class="textTheme">Initial Call</span>
      <span class="textDuration">(2 min. or less)</span> 
    </td>
    <td class="cellName">Name/Name</td>
    <td class="cellName">Name/Name</td>
  </tr>
  <tr>
    <td class="cellTime">0:00</td>
    <td>
      <div class="floatRight">
        Student/Assistant:</div>
      <span class="bulletAYFM">&bull;</span>  <span class="textTheme">Return Visit</span>
      <span class="textDuration">(2 min. or less)</span> 
    </td>
    <td class="cellName">Name/Name</td>
    <td class="cellName">Name/Name</td>
  </tr>
  <tr>
    <td class="cellTime">0:00</td>
    <td>
      <div class="floatRight">
        Student/Assistant:</div>
      <span class="bulletAYFM">&bull;</span>  <span class="textTheme">Bible Study</span>
      <span class="textDuration">(6 min. or less)</span> 
    </td>
    <td class="cellName">Name/Name</td>
    <td class="cellName">Name/Name</td>
  </tr>
</table>
<table class="tableAYFM">
  <colgroup>
    <col width="2%">
      <col width="78%">
        <col width="20%">
  </colgroup>
  <tr>
    <td class="cellAYFM" colspan="2">
      <div class="textAYFM">
        APPLY YOURSELF TO THE FIELD MINISTRY</div>
    </td>
    <td class="cellClass">Main Hall</td>
  </tr>
  <tr>
    <td class="cellTime">0:00</td>
    <td>
      <div class="floatRight">
        Student/Assistant:</div>
      <span class="bulletAYFM">&bull;</span>  <span class="textTheme">Initial Call</span>
      <span class="textDuration">(2 min. or less)</span> 
    </td>
    <td class="cellName">Name/Name</td>
  </tr>
  <tr>
    <td class="cellTime">0:00</td>
    <td>
      <div class="floatRight">
        Student/Assistant:</div>
      <span class="bulletAYFM">&bull;</span>  <span class="textTheme">Return Visit</span>
      <span class="textDuration">(2 min. or less)</span> 
    </td>
    <td class="cellName">Name/Name</td>
  </tr>
  <tr>
    <td class="cellTime">0:00</td>
    <td>
      <div class="floatRight">
        Student/Assistant:</div>
      <span class="bulletAYFM">&bull;</span>  <span class="textTheme">Bible Study</span>
      <span class="textDuration">(6 min. or less)</span> 
    </td>
    <td class="cellName">Name/Name</td>
  </tr>
</table>
<table class="tableLAC">
  <colgroup>
    <col width="2%">
      <col width="78%">
        <col width="20%">
  </colgroup>
  <tr>
    <td class="cellLAC" colspan="3">
      <div class="textLAC">
        LIVING AS CHRISTIANS</div>
    </td>
  </tr>
  <tr>
    <td class="cellTime">0:00</td>
    <td colspan="2"><span class="bulletLAC">&bull;</span><span class="textSongLabel">Song</span>
      <span class="textSongNumber">XXX</span>
    </td>
  </tr>
  <tr>
    <td class="cellTime">0:00</td>
    <td><span class="bulletLAC">&bull;</span><span class="textTheme">Title</span>
      <span class="textDuration">(00 min.)</span> 
    </td>
    <td class="cellName">Name</td>
  </tr>
  <tr>
    <td class="cellTime">0:00</td>
    <td><span class="bulletLAC">&bull;</span><span class="textTheme">Title</span>
      <span class="textDuration">(00 min.)</span> 
    </td>
    <td class="cellName">Name</td>
  </tr>
  <tr>
    <td class="cellTime">0:00</td>
    <td>
      <div class="floatRight">
        Conductor/Reader:</div>
      <span class="bulletLAC">&bull;</span><span class="textTheme">Congregation 
    		Bible Study</span>  <span class="textDuration">(30 min.)</span> 
    </td>
    <td class="cellName">Name/Name</td>
  </tr>
  <tr>
    <td class="cellTime">0:00</td>
    <td class="textTheme"><span class="bulletLAC">&bull;</span><span class="textTheme">Review/Preview/Announcements</span>
      <span class="textDuration">(3 min.)</span>
    </td>
    <td class="cellName">Name</td>
  </tr>
  <tr>
    <td class="cellTime">0:00</td>
    <td>
      <div class="floatRight">
        Prayer:</div>
      <span class="bulletLAC">&bull;</span><span class="textSongLabel">Song</span>
      <span class="textSongNumber">XXX</span>
    </td>
    <td class="cellName">Name</td>
  </tr>
</table>

答案 1 :(得分：1)

默认情况下，表格会根据表格的内容调整列宽。如果您希望列大小与多个表匹配，则选项为

  • 在列上设置显式宽度。这就是你在colgroup中尝试做的事情，但是（正如你所看到的）溢出cel宽度的内容仍会强制该列宽于指定的范围。
  • 使用table-layout: fixed 。这将强制列大小与指定的完全一致，但现在不符合cel宽度的内容将溢出列边界，与下一列重叠。这很少是理想的行为。
  • 根本不要使用表格。这将是对代码的重大改写，但值得一提;基于Flexbox的布局可以为您提供比表标签更多的控制，通常使用更简单，更易读的HTML。 （我的个人经验法则是，如果我使用多个colspan或大于零rowspan，则应该切换到flex。）
  • 使用单个表格。对于您目前的情况，这可能是最好的方法 - 它仍然利用浏览器将表调整为内容的能力，同时仍然保持列宽始终一致。

下面的代码段显示了使用单个表而非多个单独表的代码（非常简化）版本。请注意，您可以在单个表中包含多个<thead>和<tbody>，如果这在您的情况下在语义上有用。 

table {
  width: 100%;
  border-collapse: collapse
}
td {
  border: 1px solid
}
td:eq(0) {
  width: 2%
}
td:eq(1) {
  width: 78%
}
td:eq(2) {
  width: 20%
}
.floatRight {
  float: right
}
<table class="tableDATE">
  <thead>
    <tr>
      <td colspan="2">
        <div class="floatRight">Chairman:</div>
        DATE | WEEKLY BIBLE READING</td>
      <td>Name</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="2">
        <div class="floatRight">Auxiliary Classroom Counselor:</div>
        &nbsp;</td>
      <td>Name</td>
    </tr>
    <tr>
      <td colspan="3">&nbsp;</td>
    </tr>
    <tr>
      <td>0:00</td>
      <td>
        <div class="floatRight">Prayer:</div>
        <span>&bull;</span><span>Song</span>
        <span>XXX</span>
      </td>
      <td>Name</td>
    </tr>
    <tr>
      <td>0:00</td>
      <td colspan="2"><span>Opening Comments</span><span>(3 min. or less)</span>
      </td>
    </tr>
  </tbody>
  <thead>
    <tr>
      <td colspan="3">&nbsp;</td>
    </tr>


    <tr>
      <td colspan="2">
        <div class="floatRight">Chairman:</div>
        DATE | WEEKLY BIBLE READING</td>
      <td>Name</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="2">
        <div class="floatRight">Auxiliary Classroom Counselor:</div>
        &nbsp;</td>
      <td>Name</td>
    </tr>
    <tr>
      <td colspan="3">&nbsp;</td>
    </tr>
    <tr>
      <td>0:00</td>
      <td>
        <div class="floatRight">Prayer:</div>
        <span>&bull;</span><span>Song</span>
        <span>XXX</span>
      </td>
      <td>Name</td>
    </tr>
    <tr>
      <td>0:00</td>
      <td colspan="2"><span>Opening Comments</span><span>(3 min. or less)</span>
      </td>
    </tr>
  </tbody>
</table>

相关问题
最新问题