Question

大家好我试图设置最大宽度和高度，以便当我的单元格中的数据扩展时，它不会超过那个大小....似乎无法正常工作

/*styling for Data Extraction tool. */
table.data_extract
{

 border: 3px DarkGray solid;
 border-collapse: collapse;

 }

td.data_extract,

table.data_extract td
 {
 border-color : DarkGray;
border-style : groove;
border-width : thin;
border: #000000 1px solid;
text-align: center;
font-size: 7.5pt;
white-space: normal;
max-width: 125px;
max-height: 75px;
background-color:#FFFFFF;
padding-left: 4px;
padding-right: 4px;

 }

 table.data_extract th
 {
 border: #000000 1px solid;
  background-color:#DDDDD0;
  text-align: center;
 font-size: 8.5pt;

 padding: 10px;

 }

HTML：

    <table align="center" class="data_extract vert_scroll_table" >
              <tr>

                  <c:forEach var="heading" items="${results.headings}"> 
                   <th class="data_extract">${heading}</th>
                  </c:forEach>

              </tr>

              <c:forEach var="row" items="${results.data}">
                  <tr>
                      <c:forEach var="cell" items="${row}" varStatus="rowStatus">
                          <td class="data_extract">
                              <c:choose>
                                    <c:when test="${results.types[rowStatus.index].array}">
                                    <c:set var="comma" value="," />
                                        <c:forEach var="elem" items="${cell}" varStatus="cellStatus">
                                            <c:set var="myVar" value="${cellStatus.first ? '' : myVar} ${elem} ${cellStatus.last ? '' : comma}" /> 
                                        </c:forEach>
                                        <span class="mouseover_text" title="${myVar}">${myVar}</span>
                                    </c:when>
                                    <c:otherwise>
                                    <c:choose>
                                    <c:when test="${cell.class.name eq 'java.sql.Timestamp' }">
                                     <fmt:formatDate value="${cell}" pattern="${date_pattern}" />
                                    </c:when>
                                    <c:otherwise>
                                    ${cell}
                                    </c:otherwise>
                                </c:choose>
                                  </c:otherwise>
                              </c:choose>
                          </td>
                      </c:forEach>
                  </tr>
              </c:forEach>
              </table>

Answer 1

我认为您需要告诉IE如何处理溢出，即overflow:hidden。

如果您愿意，还可以尝试使用text-overflow:ellipsis来显示文字已被剪裁。

Answer 2

首先要注意的是旧版本的IE不支持max-width / height。较新的版本应该没问题。

其次，它取决于细胞的内容。如果内容必须超过最大宽度/高度约束以显示自身，那么它将。如果图像不合适，它不会尝试切断图像的结尾，可以像Lee建议的那样使用溢出。如果它是运行超过最大约束的运行文本，那么您可以使用css来包装它。

HTML最大宽度和高度在IE中不起作用

2 个答案: