Question

我有两个表，其中一个表格像标题并固定在另一个表格的顶部。他们有相同的风格只是字体大小和它们的内容是不同的，但当我在本地运行页面时，我看到我给第一个表的宽度比第二个表更多2像素。我使用reset.css并给出table-layout:fix。任何人都可以帮我解决这个问题吗？

HTML：

<div class="first extras" id="first">
      <table id="headtable">
          <tr>
            <td class="diff1">نام سرور</td>
            <td class="diff2">CPU</td>
            <td class="diff3">RAM</td>
            <td class="diff4">hard</td>
            <td class="diff5">فضا</td>
            <td class="diff6">پهنای باند</td>
            <td class="diff7">db1</td>
            <td class="diff8">data</td>
            <td class="diff9">ext</td>
            <td class="diff10">db2</td>
            <td class="diff11">os</td>
            <td class="proo diff12"></td>
          </tr>
      </table>
</div>
<div class="hole" id="hole">
      <table id="panels-compare" class="tahoma compare panels">
        <tr>
            <td width="60">ایران۷</td>
            <td width="40">Xeon 3430</td>
            <td width="40">۸ گیگابایت</td>
            <td width="37">SATA</td>
            <td width="60">2x500GB</td>
            <td width="43">۱۰۰ مگابیت</td>
            <td width="48">۱۰۰ گیگابایت</td>
            <td width="50">pars</td>
            <td width="41">pars1</td>
            <td width="45">۵۰,۰۰۰</td>
            <td width="45">۳۵۰,۰۰۰</td>
            <td width="90">order</td>
        </tr>
        <tr>
            <td>ایران۱۴</td>
            <td>2xXeon 5520</td>
            <td>۱۶ گیگابایت</td>
            <td>SATA</td>
            <td>2x1TB</td>
            <td>۱۰۰ مگابیت</td>
            <td>۲۰۰ گیگابایت</td>
            <td>pars</td>
            <td>pars1</td>
            <td>۵۰,۰۰۰</td>
            <td>۴۹۰,۰۰۰</td>
            <td>order</td>
        </tr>
        <tr>
            <td>ایران۱۵</td>
            <td>Xeon 3430</td>
            <td>۳۲ گیگابایت</td>
            <td>SATA</td>
            <td>2x1TB</td>
            <td>۱۰۰ مگابیت</td>
            <td>۳ ترابایت</td>
            <td>pars></td>
            <td>pars1</td>
            <td>۵۰,۰۰۰</td>
            <td>۳۹۰,۰۰۰</td>
            <td>order</td>
        </tr>
     </table>
</div>

CSS

.first {
  width: 980px;
  z-index: 1000;
 }
.extras {
  height: 65px !important;
 }
 .extras #headtable {
   table-layout: fixed;
 }
 #headtable,#panels-compare{
   line-height: 18px;
   width: 980px;
   border-collapse: collapse;
 }
 td:first-child {
  font-size: 18px !important;
 }
 #panels tr td:first-child, #headtable tr td:first-child {
  font-family: 'Yekan'
 }
 #headtable td:first-child, #panels-compare td:first-child{
  border-right: none !important;
 }
 #headtable td, #panels td, #panels2 td, #panels-compare td{
  border-right: 3px solid #fff;
  font-size: 13.294px;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  word-wrap: break-word;
  padding: 5px 10px;
  height: 30px;
  color: #616161;
  border-color: #fff;
  }
 .diff1 {
  width: 60px;
  padding: 5px 7px !important;
 }
 #headtable tr:first-child td {
  font-size: 18px;
 }
 .diff2{
  width:40px; 
 }

 .diff3{
  width:40px; 
 }

 .diff4{
  width:37px; 
 }
.diff5{
  width:60px; 
 }   
.diff6{
  width:43px; 
 }

.diff7{
 width:48px; 
}
.diff8{
 width:50px; 
}
.diff9{
 width:41px; 
}
.diff10{
 width:45px; 
}
.diff11{
 width:45px; 
}
.diff12{
width: 90px;
}
#panels-compare td:first-child {
padding: 5px 7px !important;
}
.compare {
 table-layout: fixed;
 }
.panels {
 border-top: none !important;
 }

我还没有上传更改，但如果你想知道主要版面是怎样的，你可以看到这个link。

Answer 1

为标头表上的每个td指定相同的宽度。然后为每个表列分配break-word css属性。

<div class="first extras" id="first">
  <table id="headtable">
      <tr>
        <td class="diff1" width="60">نام سرور</td>
        <td class="diff2" width="40">CPU</td>
        <td class="diff3" width="40">RAM</td>
        <td class="diff4" width="37">hard</td>
        <td class="diff5" width="60">فضا</td>
        <td class="diff6" width="43">پهنای باند</td>
        <td class="diff7" width="48">db1</td>
        <td class="diff8" width="50">data</td>
        <td class="diff9" width="41">ext</td>
        <td class="diff10" width="45">db2</td>
        <td class="diff11" width="45">os</td>
        <td class="proo diff12" width="90"></td>
      </tr>
  </table>
</div>
<div class="hole" id="hole">
  <table id="panels-compare" class="tahoma compare panels">
    <tr>
        <td width="60">ایران۷</td>
        <td width="40">Xeon 3430</td>
        <td width="40">۸ گیگابایت</td>
        <td width="37">SATA</td>
        <td width="60">2x500GB</td>
        <td width="43">۱۰۰ مگابیت</td>
        <td width="48">۱۰۰ گیگابایت</td>
        <td width="50">pars</td>
        <td width="41">pars1</td>
        <td width="45">۵۰,۰۰۰</td>
        <td width="45">۳۵۰,۰۰۰</td>
        <td width="90">order</td>
    </tr>
    <tr>
        <td>ایران۱۴</td>
        <td>2xXeon 5520</td>
        <td>۱۶ گیگابایت</td>
        <td>SATA</td>
        <td>2x1TB</td>
        <td>۱۰۰ مگابیت</td>
        <td>۲۰۰ گیگابایت</td>
        <td>pars</td>
        <td>pars1</td>
        <td>۵۰,۰۰۰</td>
        <td>۴۹۰,۰۰۰</td>
        <td>order</td>
    </tr>
    <tr>
        <td>ایران۱۵</td>
        <td>Xeon 3430</td>
        <td>۳۲ گیگابایت</td>
        <td>SATA</td>
        <td>2x1TB</td>
        <td>۱۰۰ مگابیت</td>
        <td>۳ ترابایت</td>
        <td>pars></td>
        <td>pars1</td>
        <td>۵۰,۰۰۰</td>
        <td>۳۹۰,۰۰۰</td>
        <td>order</td>
    </tr>
 </table>
</div>

在您的CSS中添加此类

#headtable td, #panels-compare td
{
word-wrap:break-word !important;
}

上面的代码会将标题和内容对齐在同一行。

表具有相同的风格但显示不同

1 个答案: