Question

这是一个小提琴我做过：

这是小提琴的HTML和CSS：

HTML：

<div id="container">
<table id="outerTable">
  <thead>
    <tr>
      <th colspan="2">Monday</th>
      <th colspan="2">Tuesday</th>
      <th colspan="2">Wednesday</th>
      <th colspan="2">Thursday</th>
      <th colspan="2">Friday</th>
      <th colspan="2">Saturday</th>
      <th colspan="2">Sunday</th>
    </tr>
    <tr>
      <th class="thead-cell" colspan="2">
        <table style="width: 100%;">
          <tbody>
            <tr>
              <td>Morning</td>
              <td>Afternoon</td>
            </tr>
          </tbody>
        </table>
      </th>
      <th class="thead-cell" colspan="2">
        <table style="width: 100%;">
          <tbody>
            <tr>
              <td>Morning</td>
              <td>Afternoon</td>
            </tr>
          </tbody>
        </table>
      </th>
      <th class="thead-cell" colspan="2">
        <table style="width: 100%;">
          <tbody>
            <tr>
              <td>Morning</td>
              <td>Afternoon</td>
            </tr>
          </tbody>
        </table>
      </th>
      <th class="thead-cell" colspan="2">
        <table style="width: 100%;">
          <tbody>
            <tr>
              <td>Morning</td>
              <td>Afternoon</td>
            </tr>
          </tbody>
        </table>
      </th>
      <th class="thead-cell" colspan="2">
        <table style="width: 100%;">
          <tbody>
            <tr>
              <td>Morning</td>
              <td>Afternoon</td>
            </tr>
          </tbody>
        </table>
      </th>
      <th class="thead-cell" colspan="2">
        <table style="width: 100%;">
          <tbody>
            <tr>
              <td>Morning</td>
              <td>Afternoon</td>
            </tr>
          </tbody>
        </table>
      </th>
      <th class="thead-cell" colspan="2">
        <table style="width: 100%;">
          <tbody>
            <tr>
              <td>Morning</td>
              <td>Afternoon</td>
            </tr>
          </tbody>
        </table>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="2" style="padding: 2px; background-color: #006CCC" class="cell">
        <div class="" style="padding: 0">
          <table class="cell-table" style="table-layout: fixed;">
            <tbody>
              <tr style="height: 5px;"></tr>
              <tr>
                <td class="team-cell">
                  <div>
                    <div class="badge">TEXT</div>
                    <div class="badge">TEXT</div>
                  </div>
                </td>
                <td class="team-cell">
                  <div>
                    <div class="badge">TEXT</div>
                    <div class="badge">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT </div>
                  </div>
                </td>
              </tr>
              <tr style="height: 5px;"></tr>
              <tr>
                <td colspan="2" class="team-cell">
                  <div>
                    <div class="badge">TEXT</div>
                    <div class="badge">TEXT</div>
                  </div>
                </td>
              </tr>
              <tr style="height: 5px;"></tr>
              <tr>
                <td colspan="2" class="team-cell">
                  <div>
                    <div class="badge">TEXT</div>
                    <div class="badge">TEXT</div>
                  </div>
                </td>
              </tr>
           </tbody>
         </table>
       </div>
     </td>
      <td colspan="2" style="padding: 2px; background-color: #006CCC" class="cell">
        <div class="" style="padding: 0">
          <table class="cell-table" style="table-layout: fixed;">
            <tbody>
              <tr style="height: 5px;"></tr>
              <tr>
                <td class="team-cell">
                  <div>
                    <div class="badge">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT </div>
                    <div class="badge">TEXT</div>
                  </div>
                </td>
                <td class="team-cell">
                  <div>
                    <div class="badge">TEXT</div>
                    <div class="badge">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT </div>
                  </div>
                </td>
              </tr>
              <tr style="height: 5px;"></tr>
              <tr>
                <td colspan="2" class="team-cell">
                  <div>
                    <div class="badge">TEXT</div>
                    <div class="badge">TEXT</div>
                  </div>
                </td>
              </tr>
           </tbody>
         </table>
       </div>
     </td>     
      <td colspan="2" style="padding: 2px; background-color: #006CCC" class="cell">
        <div class="" style="padding: 0">
          <table class="cell-table" style="table-layout: fixed;">
            <tbody>
              <tr style="height: 5px;"></tr>
              <tr>
                <td class="team-cell">
                  <div>
                    <div class="badge">TEXT</div>
                    <div class="badge">TEXT</div>
                  </div>
                </td>
                <td class="team-cell">
                  <div>
                    <div class="badge">TEXT</div>
                    <div class="badge">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT </div>
                  </div>
                </td>
              </tr>
              <tr style="height: 5px;"></tr>
              <tr>
                <td colspan="2" class="team-cell">
                  <div>
                    <div class="badge">TEXT</div>
                    <div class="badge">TEXT</div>
                  </div>
                </td>
              </tr>
           </tbody>
         </table>
       </div>
     </td>
      <td colspan="2" style="padding: 2px; background-color: #006CCC" class="cell">
        <div class="" style="padding: 0">
          <table class="cell-table" style="table-layout: fixed;">
            <tbody>
              <tr style="height: 5px;"></tr>
              <tr>
                <td class="team-cell">
                  <div>
                    <div class="badge">TEXT</div>
                    <div class="badge">TEXT</div>
                  </div>
                </td>
                <td class="team-cell">
                  <div>
                    <div class="badge">TEXT</div>
                    <div class="badge">TEXT</div>
                  </div>
                </td>
              </tr>
              <tr style="height: 5px;"></tr>
              <tr>
                <td colspan="2" class="team-cell">
                  <div>
                    <div class="badge">TEXT</div>
                    <div class="badge">TEXT</div>
                  </div>
                </td>
              </tr>
           </tbody>
         </table>
       </div>
     </td>
      <td colspan="2" style="padding: 2px; background-color: #006CCC" class="cell">
        <div class="" style="padding: 0">
          <table class="cell-table" style="table-layout: fixed;">
            <tbody>
              <tr style="height: 5px;"></tr>
              <tr>
                <td class="team-cell">
                  <div>
                    <div class="badge">TEXT</div>
                    <div class="badge">TEXT</div>
                  </div>
                </td>
                <td class="team-cell">
                  <div>
                    <div class="badge">TEXT</div>
                    <div class="badge">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT </div>
                  </div>
                </td>
              </tr>
              <tr style="height: 5px;"></tr>
              <tr>
                <td colspan="2" class="team-cell">
                  <div>
                    <div class="badge">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT </div>
                    <div class="badge">TEXT</div>
                  </div>
                </td>
              </tr>
           </tbody>
         </table>
       </div>
     </td>
      <td colspan="2" style="padding: 2px; background-color: #006CCC" class="cell">
        <div class="" style="padding: 0">
          <table class="cell-table" style="table-layout: fixed;">
            <tbody>
              <tr style="height: 5px;"></tr>
              <tr>
                <td class="team-cell">
                  <div>
                    <div class="badge">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT </div>
                    <div class="badge">TEXT</div>
                  </div>
                </td>
                <td class="team-cell">
                  <div>
                    <div class="badge">TEXT</div>
                    <div class="badge">TEXT</div>
                  </div>
                </td>
              </tr>
              <tr style="height: 5px;"></tr>
              <tr>
                <td colspan="2" class="team-cell">
                  <div>
                    <div class="badge">TEXT</div>
                    <div class="badge">TEXT</div>
                  </div>
                </td>
              </tr>
           </tbody>
         </table>
       </div>
     </td>     
      <td colspan="2" style="padding: 2px; background-color: #006CCC" class="cell">
        <div class="" style="padding: 0">
          <table class="cell-table" style="table-layout: fixed;">
            <tbody>
              <tr style="height: 5px;"></tr>
              <tr>
                <td class="team-cell">
                  <div>
                    <div class="badge">TEXT</div>
                    <div class="badge">TEXT</div>
                  </div>
                </td>
                <td class="team-cell">
                  <div>
                    <div class="badge">TEXT</div>
                    <div class="badge">TEXT</div>
                  </div>
                </td>
              </tr>
              <tr style="height: 5px;"></tr>
              <tr>
                <td colspan="2" class="team-cell">
                  <div>
                    <div class="badge">TEXT</div>
                    <div class="badge">TEXT</div>
                  </div>
                </td>
              </tr>
           </tbody>
         </table>
       </div>
     </td>     
   </tr>
  </tbody>
</table>
</div>

CSS：

body {
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}

#container {
  padding: 15px;
}

table {
    border-collapse:collapse;
}

#outerTable {
  margin: 0 20px;
  width: 100%;
}

th, td {
  background: white;
  border: 1px solid #dddddd;
  color: #ccc;
  padding: 8px;
}

.thead-cell {
  padding: 0;
}

.thead-cell td {
  border-top: none;
  border-bottom: none;
  border-right: none;
}

.thead-cell tr td:first-child {
  border-left-color: transparent;
}

.badge {
    display: inline-block;
    background-color: #f89406;
    color: white;
    border-radius: 4px;
    padding: 3px 5px;
    margin-bottom: 2px;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
    border: 1px solid #8E6B2A;
    font-size: 11px;
    white-space: nowrap;
}

我使用了一些嵌套表，因为我认为它会起作用，但是HTML结构可能会改变。

基本上我想要的是让每天的Morning和Afternoon单元格始终具有相应边的最宽td.team-cell的宽度（{{1}的右边） }，留给Afternoon）星期几。

如果您在Morning查找示例，最宽的团队单元格是右侧第二个，那么我希望Monday具有相同的宽度以保持{{1}与Afternoon同步。

我希望它看起来像这样（我已经用thead填充tbody，当然这不是解决方案）：

在这种情况下，最知名的方法，最佳做法是什么？

感谢您的关注。

Answer 1

如果希望单元格在行上具有相同的宽度，则应避免在每行中使用嵌套表格。为什么已经尝试使用colspan（对于工作日来说它是有道理的）。但其余的方法没有任何意义。摆脱嵌套表 - 只有一个表和普通表格单元格中的所有数据都可以实现。

认为你可以自己做吗？或者我应该帮你解决你的dom结构？

就像展示：https://jsfiddle.net/cjtvvwrq/7/

<div id="container">
    <table id="outerTable">
        <thead>
            <tr>
                <th colspan="2">Monday</th>
                <th colspan="2">Tuesday</th>
                <th colspan="2">Wednesday</th>
                <th colspan="2">Thursday</th>
                <th colspan="2">Friday</th>
                <th colspan="2">Saturday</th>
                <th colspan="2">Sunday</th>
            </tr>
            <tr>
                <td>Morning</td>
                <td>Afternoon</td>
                <td>Morning</td>
                <td>Afternoon</td>
                <td>Morning</td>
                <td>Afternoon</td>
                <td>Morning</td>
                <td>Afternoon</td>
                <td>Morning</td>
                <td>Afternoon</td>
                <td>Morning</td>
                <td>Afternoon</td>
                <td>Morning</td>
                <td>Afternoon</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="cell">
                    <div class="team-cell">
                        <div class="badge">TEXT</div>
                        <div class="badge">TEXT</div>
                    </div>
                    <div class="team-cell">
                        <div class="badge">TEXT</div>
                        <div class="badge">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</div>
                    </div>
                </td>
                <td class="cell">
                    <div class="team-cell">
                        <div class="badge">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</div>
                        <div class="badge">TEXT</div>
                    </div>
                    <div class="team-cell">
                        <div class="badge">TEXT</div>
                        <div class="badge">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</div>
                    </div>
                </td>
                <td class="cell">
                    <div class="team-cell">
                        <div class="badge">TEXT</div>
                        <div class="badge">TEXT</div>
                    </div>
                    <div class="team-cell">
                        <div class="badge">TEXT</div>
                        <div class="badge">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</div>
                    </div>
                </td>
                <td class="cell">
                    <div class="team-cell">
                        <div class="badge">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</div>
                        <div class="badge">TEXT</div>
                    </div>
                    <div class="team-cell">
                        <div class="badge">TEXT</div>
                        <div class="badge">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</div>
                    </div>
                </td>
                <td class="cell">
                    <div class="team-cell">
                        <div class="badge">TEXT</div>
                        <div class="badge">TEXT</div>
                    </div>
                    <div class="team-cell">
                        <div class="badge">TEXT</div>
                        <div class="badge">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</div>
                    </div>
                </td>
                <td class="cell">
                    <div class="team-cell">
                        <div class="badge">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</div>
                        <div class="badge">TEXT</div>
                    </div>
                    <div class="team-cell">
                        <div class="badge">TEXT</div>
                        <div class="badge">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</div>
                    </div>
                </td>
                <td class="cell">
                    <div class="team-cell">
                        <div class="badge">TEXT</div>
                        <div class="badge">TEXT</div>
                    </div>
                    <div class="team-cell">
                        <div class="badge">TEXT</div>
                        <div class="badge">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</div>
                    </div>
                </td>
                <td class="cell">
                    <div class="team-cell">
                        <div class="badge">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</div>
                        <div class="badge">TEXT</div>
                    </div>
                    <div class="team-cell">
                        <div class="badge">TEXT</div>
                        <div class="badge">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</div>
                    </div>
                </td>
                <td class="cell">
                    <div class="team-cell">
                        <div class="badge">TEXT</div>
                        <div class="badge">TEXT</div>
                    </div>
                    <div class="team-cell">
                        <div class="badge">TEXT</div>
                        <div class="badge">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</div>
                    </div>
                </td>
                <td class="cell">
                    <div class="team-cell">
                        <div class="badge">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</div>
                        <div class="badge">TEXT</div>
                    </div>
                    <div class="team-cell">
                        <div class="badge">TEXT</div>
                        <div class="badge">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</div>
                    </div>
                </td>
                <td class="cell">
                    <div class="team-cell">
                        <div class="badge">TEXT</div>
                        <div class="badge">TEXT</div>
                    </div>
                    <div class="team-cell">
                        <div class="badge">TEXT</div>
                        <div class="badge">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</div>
                    </div>
                </td>
                <td class="cell">
                    <div class="team-cell">
                        <div class="badge">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</div>
                        <div class="badge">TEXT</div>
                    </div>
                    <div class="team-cell">
                        <div class="badge">TEXT</div>
                        <div class="badge">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</div>
                    </div>
                </td>
                <td class="cell">
                    <div class="team-cell">
                        <div class="badge">TEXT</div>
                        <div class="badge">TEXT</div>
                    </div>
                    <div class="team-cell">
                        <div class="badge">TEXT</div>
                        <div class="badge">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</div>
                    </div>
                </td>
                <td class="cell">
                    <div class="team-cell">
                        <div class="badge">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</div>
                        <div class="badge">TEXT</div>
                    </div>
                    <div class="team-cell">
                        <div class="badge">TEXT</div>
                        <div class="badge">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="cell">
                    <div class="team-cell">
                        <div class="badge">TEXT</div>
                        <div class="badge">TEXT</div>
                    </div>
                    <div class="team-cell">
                        <div class="badge">TEXT</div>
                        <div class="badge">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</div>
                    </div>
                </td>
                <td class="cell">
                    <div class="team-cell">
                        <div class="badge">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</div>
                        <div class="badge">TEXT</div>
                    </div>
                    <div class="team-cell">
                        <div class="badge">TEXT</div>
                        <div class="badge">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</div>
                    </div>
                </td>
                <td class="cell">
                    <div class="team-cell">
                        <div class="badge">TEXT</div>
                        <div class="badge">TEXT</div>
                    </div>
                    <div class="team-cell">
                        <div class="badge">TEXT</div>
                        <div class="badge">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</div>
                    </div>
                </td>
                <td class="cell">
                    <div class="team-cell">
                        <div class="badge">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</div>
                        <div class="badge">TEXT</div>
                    </div>
                    <div class="team-cell">
                        <div class="badge">TEXT</div>
                        <div class="badge">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</div>
                    </div>
                </td>
                <td class="cell">
                    <div class="team-cell">
                        <div class="badge">TEXT</div>
                        <div class="badge">TEXT</div>
                    </div>
                    <div class="team-cell">
                        <div class="badge">TEXT</div>
                        <div class="badge">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</div>
                    </div>
                </td>
                <td class="cell">
                    <div class="team-cell">
                        <div class="badge">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</div>
                        <div class="badge">TEXT</div>
                    </div>
                    <div class="team-cell">
                        <div class="badge">TEXT</div>
                        <div class="badge">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</div>
                    </div>
                </td>
                <td class="cell">
                    <div class="team-cell">
                        <div class="badge">TEXT</div>
                        <div class="badge">TEXT</div>
                    </div>
                    <div class="team-cell">
                        <div class="badge">TEXT</div>
                        <div class="badge">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</div>
                    </div>
                </td>
                <td class="cell">
                    <div class="team-cell">
                        <div class="badge">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</div>
                        <div class="badge">TEXT</div>
                    </div>
                    <div class="team-cell">
                        <div class="badge">TEXT</div>
                        <div class="badge">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</div>
                    </div>
                </td>
                <td colspan="2" class="cell">
                    <div class="team-cell">
                        <div class="badge">TEXT</div>
                        <div class="badge">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</div>
                    </div>
                </td>
                <td class="cell">
                    <div class="team-cell">
                        <div class="badge">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</div>
                        <div class="badge">TEXT</div>
                    </div>
                    <div class="team-cell">
                        <div class="badge">TEXT</div>
                        <div class="badge">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</div>
                    </div>
                </td>
                <td class="cell">
                    <div class="team-cell">
                        <div class="badge">TEXT</div>
                        <div class="badge">TEXT</div>
                    </div>
                    <div class="team-cell">
                        <div class="badge">TEXT</div>
                        <div class="badge">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</div>
                    </div>
                </td>
                <td class="cell">
                    <div class="team-cell">
                        <div class="badge">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</div>
                        <div class="badge">TEXT</div>
                    </div>
                    <div class="team-cell">
                        <div class="badge">TEXT</div>
                        <div class="badge">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</div>
                    </div>
                </td>
                <td class="cell">
                    <div class="team-cell">
                        <div class="badge">TEXT</div>
                        <div class="badge">TEXT</div>
                    </div>
                    <div class="team-cell">
                        <div class="badge">TEXT</div>
                        <div class="badge">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</div>
                    </div>
                </td>            </tr>
        </tbody>
    </table>
</div>

并尝试避免内联样式，并通过类和单独的css-block /文件来完成。

使元素的宽度与另一个具有最大宽度的相应元素的宽度相同？

1 个答案: