Я создал div
с css ниже:
.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> </td>
<td><span id="submitReport" onclick="javascript: submitReport("notes", "29")">Submit</span> <span id="cancelReport" onclick="javascript: $(".overlay").hide(); $(".inner-overlay").hide();">Cancel</span></td>
</tr>
</tbody></table>
</form>
</div>
Изображение ниже - это дизайн моей таблицы. Но white-space
не работает так, как должно быть.
Я что-то пропустил?
РЕДАКТИРОВАТЬ:
Добавлен код HTML.
Загружен в jsfiddle.
Если вы добавите word-break:break-all;
Правило для вашей камеры должно работать:
.reportTable tr td:nth-child(2) {
width: 400px;
white-space: normal;
word-break:break-all;
}
white-space
недостаточно для выполнения работы?