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

时间:2015-12-17 08:48:12

标签: html css

这是一个小提琴我做过:

https://jsfiddle.net/cjtvvwrq/2/

这是小提琴的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结构可能会改变。

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

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

我希望它看起来像这样(我已经用thead填充tbody,当然这不是解决方案):

enter image description here

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

感谢您的关注。

1 个答案:

答案 0 :(得分: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 /文件来完成。