【html 表格样式】table 设置

<style>
    <%include file="bootstrap.min.css"/>
</style>
<div style="text-align:center;width:80%;padding: 8px; line-height: 1.42857; vertical-align: top; border-top-width: 1px; border-top-color: rgb(221, 221, 221); background-color: #28a745;color:#fff"><strong>用户运营数据报表</strong></div>
<table class="table table-bordered table-hover" style="width:80%">
    <tr>
    % for column in row:
      <th style="background-color:pink">${column}</th>
    % endfor
    % for index, rows in enumerate(rows_data):
        <tr>
        % for column in [row_headers[index]] + rows:
            <td>${column}</td>
        % endfor
        </tr>
    % endfor
</table>

这里写图片描述

<table border="1" class="dataframe" style="width:80%">
  <thead>
     <div style="text-align:center;width:78.18%;padding: 8px; line-height: 1.42857; vertical-align: top; border-top-width: 1px; border-top-color: rgb(221, 221, 221); background-color: #3399CC;color:#fff"><strong>债权订单数据报表</strong></div><tr style="background-color:#FFCC99;text-align:center;">
      <th></th>
      <th>order_no</th>
      <th>debt_no</th>
      <th>create_time</th>
      <th>return_msg</th>
    </tr>
  </thead>
  <tbody>
    <tr style="text-align:center">
      <th>0</th>
      <td>20170927000001</td>
      <td>WND20170927000001</td>
      <td>2017-09-27 10:25:56</td>
      <td>{"success":true}</td>
    </tr>
    <tr>
      <th>1</th>
      <td>20170927000006</td>
      <td>WND20170927000006</td>
      <td>2017-09-27 11:10:15</td>
      <td>{"success":true}</td>
    </tr>
    <tr>
      <th>2</th>
      <td>20170927000007</td>
      <td>WND20170927000007</td>
      <td>2017-09-27 11:12:25</td>
      <td>{"success":true}</td>
    </tr>
    <tr>
      <th>3</th>
      <td>20170926000037</td>
      <td>WND20170926000037</td>
      <td>2017-09-27 11:26:42</td>
      <td>{"success":true}</td>
    </tr>
    <tr>
      <th>4</th>
      <td>20170927000004</td>
      <td>WND20170927000004</td>
      <td>2017-09-27 12:03:10</td>
      <td>{"success":true}</td>
    </tr>
    <tr>
      <th>5</th>
      <td>20170927000008</td>
      <td>WND20170927000008</td>
      <td>2017-09-27 12:23:46</td>
      <td>{"success":true}</td>
    </tr>
    <tr>
      <th>6</th>
      <td>20170927000003</td>
      <td>WND20170927000003</td>
      <td>2017-09-27 12:41:44</td>
      <td>{"success":true}</td>
    </tr>
    <tr>
      <th>7</th>
      <td>20170927000009</td>
      <td>WND20170927000009</td>
      <td>2017-09-27 13:32:48</td>
      <td>{"success":true}</td>
    </tr>
    <tr>
      <th>8</th>
      <td>20170927000017</td>
      <td>WND20170927000017</td>
      <td>2017-09-27 14:12:06</td>
      <td>{"success":true}</td>
    </tr>
    <tr>
      <th>9</th>
      <td>20170927000018</td>
      <td>WND20170927000018</td>
      <td>2017-09-27 14:40:42</td>
      <td>{"success":true}</td>
    </tr>
    <tr>
      <th>10</th>
      <td>20170927000024</td>
      <td>WND20170927000024</td>
      <td>2017-09-27 14:46:13</td>
      <td>{"success":true}</td>
    </tr>
    <tr>
      <th>11</th>
      <td>20170927000013</td>
      <td>WND20170927000013</td>
      <td>2017-09-27 14:53:08</td>
      <td>{"success":true}</td>
    </tr>
    <tr>
      <th>12</th>
      <td>20170927000010</td>
      <td>WND20170927000010</td>
      <td>2017-09-27 14:53:55</td>
      <td>{"success":true}</td>
    </tr>
    <tr>
      <th>13</th>
      <td>20170926000017</td>
      <td>WND20170926000017</td>
      <td>2017-09-27 15:29:02</td>
      <td>{"success":true}</td>
    </tr>
    <tr>
      <th>14</th>
      <td>20170927000026</td>
      <td>WND20170927000026</td>
      <td>2017-09-27 15:33:47</td>
      <td>{"success":true}</td>
    </tr>
    <tr>
      <th>15</th>
      <td>20170927000029</td>
      <td>WND20170927000029</td>
      <td>2017-09-27 16:08:44</td>
      <td>{"success":true}</td>
    </tr>
    <tr>
      <th>16</th>
      <td>20170927000028</td>
      <td>WND20170927000028</td>
      <td>2017-09-27 16:56:14</td>
      <td>{"success":true}</td>
    </tr>
    <tr>
      <th>17</th>
      <td>20170927000035</td>
      <td>WND20170927000035</td>
      <td>2017-09-27 17:01:41</td>
      <td>{"success":true}</td>
    </tr>
    <tr>
      <th>18</th>
      <td>20170927000027</td>
      <td>WND20170927000027</td>
      <td>2017-09-27 17:02:03</td>
      <td>{"success":true}</td>
    </tr>
    <tr>
      <th>19</th>
      <td>20170927000034</td>
      <td>WND20170927000034</td>
      <td>2017-09-27 17:09:35</td>
      <td>{"success":true}</td>
    </tr>
    <tr>
      <th>20</th>
      <td>20170927000036</td>
      <td>WND20170927000036</td>
      <td>2017-09-27 17:19:03</td>
      <td>{"success":true}</td>
    </tr>
    <tr>
      <th>21</th>
      <td>20170927000038</td>
      <td>WND20170927000038</td>
      <td>2017-09-27 17:20:05</td>
      <td>{"success":true}</td>
    </tr>
    <tr>
      <th>22</th>
      <td>20170927000037</td>
      <td>WND20170927000037</td>
      <td>2017-09-27 17:38:02</td>
      <td>{"success":true}</td>
    </tr>
  </tbody>
</table>

这里写图片描述

版本3:

< !DOCTYPE html >  
< html > 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>font-size字体大小测试-DIVCSS5实验</title> 
<style type="text/css"> 
body{ font-size:12px; line-height:24px;} 
.exp1{font-size:12px;} 
.exp2{font-size:xx-small;} 
.exp3{font-size:small;} 
.exp4{font-size:x-large;} 
.exp5{font-size:larger;} 
.exp6{font-size:smaller;} 
.exp7{font-size:50%;} 
.exp8{font-size:150%;} 
</style> 
<!-- www.divcss5.com --> 
</head> 
<body> 
<div class="exp1">我被font-size值为12px大小</div> 
<div class="exp2">我被font-size值为xx-small大小</div> 
<div class="exp3">我被font-size值为small大小</div> 
<div class="exp4">我被font-size值为x-large大小</div> 
<div class="exp5">我被font-size值为larger大小</div> 
<div class="exp6">我被font-size值为smaller大小</div> 
<div class="exp7">我被font-size值为50%大小</div> 
<div class="exp8">我被font-size值为150%大小</div> 
</body> 
</html> 

这里写图片描述

<style type="text/css">
table {
border-right: 1px solid #99CCFF;
border-bottom: 1px solid #99CCFF;
}
table td {
border-left: 1px solid #99CCFF;
border-top: 1px solid #99CCFF;
}
table th {
border-left: 1px solid #99CCFF;
border-top: 1px solid #99CCFF;
}
</style>

<table border="0" class="dataframe" style="width:80%" cellspacing="2" cellpadding="2">
  <thead>
     <div style="text-align:center;width:78.18%;padding: 8px; line-height: 1.42857; vertical-align: top; border-top-width: 1px; border-top-color: rgb(221, 221, 221); background-color: #3399CC;color:#fff"><strong ><font size="4">债权订单数据报表</font> </strong></div><tr style="background-color:#CCFFCC;color:#000000;text-align:center;">
      <th>num</th>
      <th>order_no</th>
      <th>debt_no</th>
      <th>create_time</th>
      <th>return_msg</th>
    </tr>
  </thead>
  <tbody>
    <tr style="text-align:center;">
      <th>0</th>
      <td>20170927000001</td>
      <td>WND20170927000001</td>
      <td>2017-09-27 10:25:56</td>
      <td>{"success":true}</td>
    </tr>
    <tr>
      <th>1</th>
      <td>20170927000006</td>
      <td>WND20170927000006</td>
      <td>2017-09-27 11:10:15</td>
      <td>{"success":true}</td>
    </tr>
    <tr>
      <th>2</th>
      <td>20170927000007</td>
      <td>WND20170927000007</td>
      <td>2017-09-27 11:12:25</td>
      <td>{"success":true}</td>
    </tr>
    <tr>
      <th>3</th>
      <td>20170926000037</td>
      <td>WND20170926000037</td>
      <td>2017-09-27 11:26:42</td>
      <td>{"success":true}</td>
    </tr>
    <tr>
      <th>4</th>
      <td>20170927000004</td>
      <td>WND20170927000004</td>
      <td>2017-09-27 12:03:10</td>
      <td>{"success":true}</td>
    </tr>
    <tr>
      <th>5</th>
      <td>20170927000008</td>
      <td>WND20170927000008</td>
      <td>2017-09-27 12:23:46</td>
      <td>{"success":true}</td>
    </tr>
    <tr>
      <th>6</th>
      <td>20170927000003</td>
      <td>WND20170927000003</td>
      <td>2017-09-27 12:41:44</td>
      <td>{"success":true}</td>
    </tr>
    <tr>
      <th>7</th>
      <td>20170927000009</td>
      <td>WND20170927000009</td>
      <td>2017-09-27 13:32:48</td>
      <td>{"success":true}</td>
    </tr>
    <tr>
      <th>8</th>
      <td>20170927000017</td>
      <td>WND20170927000017</td>
      <td>2017-09-27 14:12:06</td>
      <td>{"success":true}</td>
    </tr>
    <tr>
      <th>9</th>
      <td>20170927000018</td>
      <td>WND20170927000018</td>
      <td>2017-09-27 14:40:42</td>
      <td>{"success":true}</td>
    </tr>
    <tr>
      <th>10</th>
      <td>20170927000024</td>
      <td>WND20170927000024</td>
      <td>2017-09-27 14:46:13</td>
      <td>{"success":true}</td>
    </tr>
    <tr>
      <th>11</th>
      <td>20170927000013</td>
      <td>WND20170927000013</td>
      <td>2017-09-27 14:53:08</td>
      <td>{"success":true}</td>
    </tr>
    <tr>
      <th>12</th>
      <td>20170927000010</td>
      <td>WND20170927000010</td>
      <td>2017-09-27 14:53:55</td>
      <td>{"success":true}</td>
    </tr>
    <tr>
      <th>13</th>
      <td>20170926000017</td>
      <td>WND20170926000017</td>
      <td>2017-09-27 15:29:02</td>
      <td>{"success":true}</td>
    </tr>
    <tr>
      <th>14</th>
      <td>20170927000026</td>
      <td>WND20170927000026</td>
      <td>2017-09-27 15:33:47</td>
      <td>{"success":true}</td>
    </tr>
    <tr>
      <th>15</th>
      <td>20170927000029</td>
      <td>WND20170927000029</td>
      <td>2017-09-27 16:08:44</td>
      <td>{"success":true}</td>
    </tr>
    <tr>
      <th>16</th>
      <td>20170927000028</td>
      <td>WND20170927000028</td>
      <td>2017-09-27 16:56:14</td>
      <td>{"success":true}</td>
    </tr>
    <tr>
      <th>17</th>
      <td>20170927000035</td>
      <td>WND20170927000035</td>
      <td>2017-09-27 17:01:41</td>
      <td>{"success":true}</td>
    </tr>
    <tr>
      <th>18</th>
      <td>20170927000027</td>
      <td>WND20170927000027</td>
      <td>2017-09-27 17:02:03</td>
      <td>{"success":true}</td>
    </tr>
    <tr>
      <th>19</th>
      <td>20170927000034</td>
      <td>WND20170927000034</td>
      <td>2017-09-27 17:09:35</td>
      <td>{"success":true}</td>
    </tr>
    <tr>
      <th>20</th>
      <td>20170927000036</td>
      <td>WND20170927000036</td>
      <td>2017-09-27 17:19:03</td>
      <td>{"success":true}</td>
    </tr>
    <tr>
      <th>21</th>
      <td>20170927000038</td>
      <td>WND20170927000038</td>
      <td>2017-09-27 17:20:05</td>
      <td>{"success":true}</td>
    </tr>
    <tr>
      <th>22</th>
      <td>20170927000037</td>
      <td>WND20170927000037</td>
      <td>2017-09-27 17:38:02</td>
      <td>{"success":true}</td>
    </tr>
  </tbody>
</table>
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页