zoukankan      html  css  js  c++  java
  • css表格合并边框以及单元格宽度计算方式

    <template>
      <div style="height: 100%;">
        <table style="table-layout: fixed">
          <tr>
            <td style=" 100px">
              <span>这是一段中文这是一段中文这是一段中文</span>
            </td>
            <td></td>
          </tr>
          <tr>
            <td></td>
            <td></td>
          </tr>
        </table>
    
        <table style="border-collapse: collapse">
          <tr>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td></td>
            <td></td>
          </tr>
        </table>
    
        <table>
          <tr style="height: fit-content">
            <td>
              这是一段中文<br/>这是一段中文<br/>这是一段中文<br/>
            </td>
            <td></td>
          </tr>
          <tr>
            <td></td>
            <td></td>
          </tr>
        </table>
      </div>
    </template>
    
    <script>
      export default {
        name: "a8"
      }
    </script>
    
    <style scoped>
      table:nth-of-type(1) {
         100%;
        height: 33%;
      }
    
      table:nth-of-type(2) {
         100%;
        height: 34%;
      }
    
      table:nth-of-type(3) {
         100%;
        height: 33%;
      }
    
      td {
        border: 1px solid black;
      }
    
      span {
        white-space: nowrap;
      }
    </style>
  • 相关阅读:
    Java多线程之监控Java线程池运行状态
    JS自学笔记02
    JS自学笔记01
    JAVA自学笔记09
    前端自学笔记07
    前端自学笔记06
    前端自学笔记05
    前端自学笔记04
    前端自学笔记03
    前端自学笔记02
  • 原文地址:https://www.cnblogs.com/linding/p/13435365.html
Copyright © 2011-2022 走看看