tabelにより一部の列幅を固定し、1列は容器幅に応じて適応する

6913 ワード
CSS
最も簡単な方法は、一部の列の固定幅を実現し、1つの列は容器の幅に従って適応する.
table-layout: fixed  ，              ，  td overflow：hidden，    
  table   100%


DEMO   ：            ，         （      ）
 
  
 
   
  
/span>html>
<html>
<head>
    <meta charset="UTF-8">
    <title>title>
    <style>
        .firstLine,.thirdLine,.forthLine
        {
            width:100px;
        }
        .secondLine
        {
        }
        .myTable
        {
            overflow:hidden;
            width:100%;
            background-color: #ccc;
            table-layout: fixed
        }
        table td
        {
            overflow: hidden;
        }
    style>
head>
<body>
<table class="myTable">
    <tr>
        <td class="firstLine">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAtd>
        <td class="secondLine">                                          td>
        <td class="thirdLine">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAtd>
        <td class="forthLine">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAtd>
    tr>
    <tr>
        <td class="firstLine">   td>
        <td class="secondLine">   td>
        <td class="thirdLine">   td>
        <td class="forthLine">   td>
    tr>
table>
body>
<script>
script>
html>
上海市コンピュータ学会コンテストプラットフォーム8月試合丙組「販促サイコロ」問題解
洛谷P 3150 pbのゲーム(1)