相关疑难解决方法(0)

如何使用<div>标签和Css创建表

我想只使用<div>标签和CSS 创建表.

这是我的样本表.

<body>
  <form id="form1">
      <div class="divTable">
             <div class="headRow">
                <div class="divCell" align="center">Customer ID</div>
                <div  class="divCell">Customer Name</div>
                <div  class="divCell">Customer Address</div>
             </div>
            <div class="divRow">
                  <div class="divCell">001</div>
                <div class="divCell">002</div>
                <div class="divCell">003</div>
            </div>
            <div class="divRow">
                <div class="divCell">xxx</div>
                <div class="divCell">yyy</div>
                <div class="divCell">www</div>
           </div>
            <div class="divRow">
                <div class="divCell">ttt</div>
                <div class="divCell">uuu</div>
                <div class="divCell">Mkkk</div>
           </div>

      </div>
  </form>
</body>

Run Code Online (Sandbox Code Playgroud)

风格:

<style type="text/css">
    .divTable
    {
        display:  table;
        width:auto;
        background-color:#eee;
        border:1px solid  #666666;
        border-spacing:5px;/*cellspacing:poor IE support for  this*/
       /* border-collapse:separate;*/
    }

    .divRow
    {
       display:table-row;
       width:auto;
    }

    .divCell
    { …

Run Code Online (Sandbox Code Playgroud)

html css

Kum*_*ara

2016 03-19

173
推荐指数

5
解决办法

53万
查看次数

CSS"display:table-column"应该如何工作？

鉴于以下HTML和CSS,我在浏览器中看不到任何内容(Chrome和IE在撰写本文时最新).一切都崩溃到0x0像素.为什么？

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        section { display: table; height: 100%; background-color: grey; }

        #colLeft { display: table-column; height: 100%; background-color: green; }
        #colRight { display: table-column; height: 100%; background-color: red; }

        #row1 { display: table-row; height: 100%; }
        #row2 { display: table-row; height: 100%; }
        #row3 { display: table-row; height: 100%; }

        #cell1 { display: table-cell; height: 100%; }
        #cell2 { display: table-cell; height: 100%; }
        #cell3 { display: table-cell; height: 100%; }
    </style>
</head>
<body>
    <section> …

Run Code Online (Sandbox Code Playgroud)

css tablelayout css-tables

Eli*_*iot

2017 01-16

78
推荐指数

2
解决办法

10万
查看次数