不使用'表'創建動態html表

我需要創建一個html表而不使用表標記或CSS顯示：表（和相同）屬性。不使用'表'創建動態html表

我寫了這個HTML代碼

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset='utf-8'> 
    <title>Creating div tables</title> 
    <link rel="stylesheet" type="text/css" href="flex.css"> 
    <script type="text/javascript" src="jquery-1.11.2.js"></script> 
</head> 
<body> 
    <div class="tbl"></div> 

    <script type="text/javascript"> 
     for (var i = 0; i < 5; i++) { 
      $('.tbl').append('<div class="rw"></div>'); 
     }; 

     for (var i = 0; i < 8; i++) { 
      $('.rw').append('<div class="col col'+i.toString()+'">'+Math.random().toString()+'</div>'); 
     }; 
    </script> 
</body> 
</html>

而這個CSS：

.tbl { 
    background-color: yellow; 
    display: flex; 
    flex-flow:column; 
    position: relative; 
    width: 80%; 
    left: 10%; 
} 

.rw { 
    background-color: rgb(197, 253, 255); 
    display: flex; 
    flex-flow:row; 
    resize:both; 
} 

.col { 
    border-style: solid; 
    border-color: black; 
    overflow: hidden; 
    display: inline-block;  
}

現在，我需要做的這樣，如果在單元格中存在溢出，此表中執行根據下一個方案調整整個原始和/或列的大小。

Scheme of cells resizing

此時只有原始大小調整工作。如何實現整列調整大小？我可以只使用CSS來執行它嗎？或者我必須使用JavaScript/Jquery？

謝謝。

來源

2015-04-27 skeeph

爲什麼你想避免表？ – recursive

也許可以查看與「display：flex」容器樣式相伴隨的CSS規則。 – Robusto

我有點困惑你需要什麼，但你可以用一組Flexbox的容器具有靈活的孩子，以使該調整到的內容在每個子細胞量的網格：

enter image description here

body{ background-color: ivory; } 
 
#container{width:400px;} 
 
.Grid { 
 
    display: flex; 
 
} 
 
.Grid-cell { 
 
    flex: 1 1 auto; 
 
    border:1px solid green; 
 
}

<div id='container'> 
 
     <div class="Grid"> 
 
      <div class="Grid-cell">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</div> 
 
      <div class="Grid-cell">A small bit of text.</div> 
 
      <div class="Grid-cell">A small bit of text.</div> 
 
     </div> 
 
     <div class="Grid"> 
 
      <div class="Grid-cell">A small bit of text.</div> 
 
      <div class="Grid-cell">A small bit of text.</div> 
 
      <div class="Grid-cell">A small bit of text.</div> 
 
     </div> 
 
     <div class="Grid"> 
 
      <div class="Grid-cell">A small bit of text.</div> 
 
      <div class="Grid-cell">A small bit of text.</div> 
 
      <div class="Grid-cell">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</div> 
 
     </div> 
 
    </div>

來源

2015-04-27 17:46:00 markE

不使用'表'創建動態html表

回答

相關問題