Question

对于下面的代码，我的段落使我的第一列（以link1为首）太长了。我已将word-wrap设置为break-word，但它似乎没有任何效果。是以某种方式被覆盖了吗？

＆＃13;

th {
  font-family: "SansSerif";
  background-color: yellow;
  text-align: left;
}
td {
  padding: 5px;
}
#table1 {
  border: double;
  border-spacing: 5px;
  table-layout: fixed;
}
.para {
  padding: 5px;
  border-width: 1px;
  border-style: solid;
  word-wrap: break-word;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">

  <title>
    Table Test
  </title>

</head>

<body>

  <table align="center" cellpadding="5px" cellspacing="5px" id="table1">
    <th><a href="http://www.google.ca">link1</a>
    </th>
    <th><a href="http://www.last.fm/user/RomeLeader">link2</a>
    </th>
    <th><a href="http://www.wolfparade.com">link3</a>
    </th>
    <th><a href="http://www.sporcle.com">link4</a>
    </th>
    <th><a href="http://www.reddit.com/r/chelseafc">link5</a>
    </th>
    <tr>
      <td align="center" style="color:red; font-size: xx-large" ; colspan="5">
        Home Page
      </td>
    </tr>
    <tr>
      <td>
        <div class="para">
          <p>Building applications for the internet is a complex and fast-moving field which utilizes a variety of continually evolving technologies. Whether your perspective is from the client or server side, there are many languages
          </p>
        </div>
      </td>
    </tr>
  </table>

</body>

</html>

＆＃13;

Answer 1

我怀疑问题是表格单元格中div的一个段落 - 除非另有说明，否则div是块元素，而不是内联元素。

我认为将段落放在单元格中（使用或不使用.para类）并忽略div是没有问题的。

这样，para应该只包含计算的单元格宽度。

Answer 2

您可以明确设置元素的宽度：

getDefaultProps() {
    return {
        label: 'Date:',
        minDate: '',
    };
},

componentDidMount() {
    this.datePicker = $('#'+this.props.id);
    if (this.datePicker) {
        this.datePicker.datepicker({
            minDate: this.props.minDate,
        });
    }
},

完成示例：

＆＃13;

th:first-of-type, .para p {
width: 90px;
}

＆＃13;

th {
  font-family: "SansSerif";
  background-color: yellow;
  text-align: left;
}
td {
  padding: 5px;
}
#table1 {
  border: double;
  border-spacing: 5px;
  table-layout: fixed;
}
.para {
  padding: 5px;
  border-width: 1px;
  border-style: solid;
  word-wrap: break-word;
}

th:first-of-type, .para p {
width: 90px;
}

＆＃13;

Answer 3

最好的解决方法是将导航栏移出桌面。您当前的布局假定标题是针对后续行中的for列。

这是一个带有无序列表的工作示例：

http://codepen.io/xvariant/pen/adKVgJ

＆＃13;

ul {
  list-style: none;
  padding: 0px;
}
li {
  display: inline;
  padding: 10px;
  font-family: "SansSerif";
  background-color: yellow;
  text-align: left;
}
td {
  padding: 5px;
}
#table1 {
  border: double;
  border-spacing: 5px;
  table-layout: fixed;
}
.para {
  padding: 5px;
  border-width: 1px;
  border-style: solid;
  word-wrap: break-word;
}

＆＃13;

<ul>
  <li><a href="#">link1</a>
  </li>
  <li><a href="#">link2</a>
  </li>
  <li><a href="#">link3</a>
  </li>
  <li><a href="#">link4</a>
  </li>
</ul>
<table align="center" cellpadding="5px" cellspacing="5px" id="table1">
  <td align="center" style="color:red; font-size: xx-large" ; colspan="5">
    Home Page
  </td>
  </tr>
  <tr>
    <td>
      <div class="para">
        <p>Building applications for the internet is a complex and fast-moving field which utilizes a variety of continually evolving technologies. Whether your perspective is from the client or server side, there are many languages
        </p>
      </div>
    </td>
  </tr>

＆＃13;

为什么我的段落没有包裹在我的表中？

3 个答案: