首页 > 关于表格实现的问题

关于表格实现的问题

直接用表格能实现右边的效果?如果可以结构是怎么样的?表格很少写,希望有人指点下


<table>
    <thead>
        <tr>
            <th rowspan="2">人物/組織名稱</th>
            <th rowspan="2">責任方式</th>
            <th colspan="6">人物信息</th>
        </tr>
        <tr>
            <th>民族</th>
            <th>籍貫</th>
            <th>性別</th>
            <th>年齡</th>
            <th>文化程度</th>
            <th>職業/職稱</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>趙世傑</td>
            <td>翻譯者</td>
            <td>漢族</td>
            <td>河北</td>
            <td>男</td>
            <td>81</td>
            <td>不識字</td>
            <td>民間戲曲藝人</td>
        </tr>
    </tbody>
</table>

實現

jsFiddle


<div class="ceshi">
  <h4>人物信息</h4>
  <table>
    <thead>
     <tr>
      <th>民族</th>
      <th>民族</th>
      <th>民族</th>
      <th>民族</th>
      <th>民族</th>
      <th>民族</th>
     </tr>
     
    </thead>
    <tbody>
      <tr>
        <td>测试</td>
        <td>测试</td>
        <td>测试</td>
        <td>测试</td>
        <td>测试</td>
        <td>测试</td>
      </tr>



    </tbody>


  </table>
</div>


<style type="text/css">
div.ceshi{width: 1000px;}
h4{text-align: center;border:1px #ddd solid;padding:20px;margin:0;border-bottom: none;}
table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}
table tr th,table tr td{border:1px #ddd solid;padding:20px;}
</style>
【热门文章】
【热门文章】