CSS에서 table-layout:fixed를 사용하면 테이블 크기가 변경되는 이유는 무엇입니까?-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS에서 table-layout:fixed를 사용하면 테이블 크기가 변경되는 이유는 무엇입니까?

黄舟

Jun 30, 2017 pm 01:48 PM

fixed table-layout

처음으로 열어보세요

CSS에서 table-layout:fixed를 사용하면 테이블 크기가 변경되는 이유는 무엇입니까?

표시가 정확합니다

삭제를 누르면

CSS에서 table-layout:fixed를 사용하면 테이블 크기가 변경되는 이유는 무엇입니까?

테이블이 작아집니다.

이게 왜죠?
주문 휴지통은 고정된 크기의 레이어이고 그 아래에 테이블(테이블분류기)이 있습니다

<div class="tableHeader" style="width:928px">订单回收站</div>
                <table class="tablesorter" cellspacing="1" style="word-break:break-all;table-layout:fixed;">
                    <thead>
                        <tr>
                            <th style="width:40px;">选择</th>
                            <th style="width:100px;">品名</th>
                            <th style="width:70px;">照片</th>
                            <th style="width:80px;">订货时间</th>
                            <th style="width:90px;">颜色</th>
                            <th style="width:50px;">数量</th>
                            <th style="width:60px;">单价</th>
                            <th style="width:60px;">总价</th>
                            <th style="width:100px;">生产状态</th>   
                            <th style="width:100px;">备注</th>   
                            <th style="width:80px;">客户</th>                                 
                        </tr>
                   </thead>
                   <tbody>
                                    
                   <tr>
                       <td><input name="chk_list" type="checkbox" value=&#39;2134&#39; /></td>
                       <td>DP-TA-88</td>
                       <td><a href=&#39;../PriceList/bigPhoto/DP-TA-88.jpg&#39; class=&#39;highslide&#39; onclick=&#39;return hs.expand(this)&#39;>
                       <img src=&#39;../PriceList/smallPhoto/DP-TA-88.jpg&#39; alt=&#39;照片&#39; onerror=this.src=&#39;../images/noPhoto.png&#39; onload=&#39;ReSizeImage(this,70,70);&#39;></a>
                       </td>
                       <td>2011/9/19<br /><font color="#FF0000">2011/9/19</font><br />剩 -1天</td>
                       <td>如图</td>
                       <td>1</td>
                       <td>0</td>
                       <td>0</td> 
                       <td></td>
                       <td></td>
                       <td>世贸其他</td>
                   </tr>                   
                 
                </tbody>
                </table>

로그인 후 복사

브라우저에 문제가 있는 걸까요?

테이블 너비는 다음과 같이 설정하는 것이 가장 좋습니다: width="500" =>style ="width:500px; "브라우저 지원이 더 높습니다

테이블에 너비="928"을 설정하는 것이 가장 좋습니다

콘텐츠를 표시할 때 테이블에서 너비를 설정하고 높이를 설정하지 않은 적이 있습니까? 표에서 표는 내부의 텍스트와 그림과 함께 확장됩니다. 정보 표를 삭제하고 원래 크기로 되돌린 후에 표와 표의 각 셀의 높이와 너비를 수정해야 합니다.

<style type="text/css">
th{height:50px}
td{height:100px}
  </style>
 </HEAD>

 <BODY>
  <div class="tableHeader" style="width:928px;background-color:red">订单回收站</div>
                <table border="1" class="tablesorter" cellspacing="1" style="word-break:break-all;table-layout:fixed;width:928px">
                    <thead>
                        <tr>
                            <th style="width:40px;">选择</th>
                            <th style="width:100px;">品名</th>
                            <th style="width:70px;">照片</th>
                            <th style="width:80px;">订货时间</th>
                            <th style="width:90px;">颜色</th>
                            <th style="width:50px;">数量</th>
                            <th style="width:60px;">单价</th>
                            <th style="width:60px;">总价</th>
                            <th style="width:100px;">生产状态</th>   
                            <th style="width:100px;">备注</th>   
                            <th style="width:80px;">客户</th>                                 
                        </tr>
                   </thead>
                   <tbody>
                                   
                   <tr>
                       <td><input name="chk_list" type="checkbox" value=&#39;2134&#39; /></td>
                       <td>DP-TA-88</td>
                       <td><a href=&#39;../PriceList/bigPhoto/DP-TA-88.jpg&#39; class=&#39;highslide&#39; onclick=&#39;return hs.expand(this)&#39;>
                       <img src=&#39;../PriceList/smallPhoto/DP-TA-88.jpg&#39; alt=&#39;照片&#39; onerror=this.src=&#39;../images/noPhoto.png&#39; onload=&#39;ReSizeImage(this,70,70);&#39;></a>
                       </td>
                       <td>2011/9/19<br /><font color="#FF0000">2011/9/19</font><br />剩 -1天</td>
                       <td>如图</td>
                       <td>1</td>
                       <td>0</td>
                       <td>0</td> 
                       <td></td>
                       <td></td>
                       <td>世贸其他</td>
                   </tr>                   
                
                </tbody>
                </table>

 </BODY>

로그인 후 복사

앞서 어떤 분이 div의 너비를 설정하고 테이블의 너비를 설정하는 것이 가장 좋다고 말씀하셨는데, 상황에 따라 th와 td 모두 고정된 높이를 설정해야 합니다. . div와 테이블의 너비가 동일하다는 것을 좀 더 명확하게 볼 수 있도록 div에 색상을 추가했습니다. 나중에 삭제해도 괜찮습니다.

위 내용은 CSS에서 table-layout:fixed를 사용하면 테이블 크기가 변경되는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.