白色空間無法正常工作

Question

我在下面用css創建了一個div ：

.inner-overlay {
    width: 500px;
    min-height: 200px;
    height: 150px;
    background: white;
    position: absolute;
    margin: auto;
    z-index: 1301;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border: 3px solid rgba(56, 93, 138, 1.0);
    display: none;
}

div包括css的形式：

.reportTable {
    width: 460px;
    margin: auto;
}
.reportTable tr td:nth-child(1) {
   width: 20px;
}
.reportTable tr td:nth-child(2) {
   width: 400px;
   white-space: normal;
}

對於div和form ：

<div class="inner-overlay" style="display: block;">
    <form class="reportForm">
    <table class="reportTable">
    <tbody>
        <tr>
        <td colspan="2">Please Choose A Reason From Below:</td>
        </tr>
        <tr>
        <td><input type="radio" name="reportID" value="1"></td>
        <td>There is/are course work content or answer.</td>
        </tr>
        <tr>
        <td><input type="radio" name="reportID" value="2"></td>
        <td>The content is not related to academic.</td>
        </tr>
        <tr>
        <td><input type="radio" name="reportID" value="3"></td>
        <td>There is/are suspicious file uploaded.</td>
        </tr>
        <tr>
        <td><input type="radio" name="reportID" value="4"></td>
        <td>asdasdasdasd</td>
        </tr>
        <tr>
        <td><input type="radio" name="reportID" value="5"></td>
                    <td>asdasfasfffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</td>
        </tr>
        <tr>
        <td>&nbsp;</td>
        <td><span id="submitReport" onclick="javascript: submitReport(&quot;notes&quot;, &quot;29&quot;)">Submit</span> <span id="cancelReport" onclick="javascript: $(&quot;.overlay&quot;).hide(); $(&quot;.inner-overlay&quot;).hide();">Cancel</span></td>
        </tr>
    </tbody></table>
    </form>
</div>

下圖是我桌子的設計。 但是， white-space不能正常工作。

我錯過了什么嗎？

編輯：

1. 添加了HTML代碼。

2. 上傳到jsfiddle 。

Answer 1

如果你添加word-break:break-all; 規則到你的單元格它應該工作：

.reportTable tr td:nth-child(2) {
    width: 400px;
    white-space: normal;
    word-break:break-all;
}

jsFiddle例子