BootStrap 之 CSS全局样式中的表格

不使用BootStrap 之 CSS全局样式中的表格，自己也不定义CSS样式

<table>
    <caption>学生信息表caption>
    <tr>
        <th>编号th>
        <th>姓名th>
        <th>性别th>
        <th>操作th>
    tr>
    <tr>
        <td>1td>
        <td>令狐冲td>
        <td>男td>
    tr>
    <tr>
        <td>2td>
        <td>东方不败td>
        <td>男td>
    tr>
    <tr>
        <td>3td>
        <td>五毒教主td>
        <td>女td>
    tr>
table>

效果如下：

 

使用BootStrap 之 CSS全局样式中的表格 —— .table

<table class="table">
    <caption>学生信息表caption>
    <tr>
        <th>编号th>
        <th>姓名th>
        <th>性别th>
    tr>
    <tr>
        <td>1td>
        <td>令狐冲td>
        <td>男td>
    tr>
    <tr>
        <td>2td>
        <td>东方不败td>
        <td>男td>
    tr>
    <tr>
        <td>3td>
        <td>五毒教主td>
        <td>女td>
    tr>
table>

效果如下：

 

使用BootStrap 之 CSS全局样式中的表格 —— .table-striped

<table class="table table-striped">
    <caption>学生信息表caption>
    <tr>
        <th>编号th>
        <th>姓名th>
        <th>性别th>
    tr>
    <tr>
        <td>1td>
        <td>令狐冲td>
        <td>男td>
    tr>
    <tr>
        <td>2td>
        <td>东方不败td>
        <td>男td>
    tr>
    <tr>
        <td>3td>
        <td>五毒教主td>
        <td>女td>
    tr>
table>

效果如下：

 

使用BootStrap 之 CSS全局样式中的表格 —— .table-bordered

<table class="table table-striped table-bordered">
    <caption>学生信息表caption>
    <tr>
        <th>编号th>
        <th>姓名th>
        <th>性别th>
    tr>
    <tr>
        <td>1td>
        <td>令狐冲td>
        <td>男td>
    tr>
    <tr>
        <td>2td>
        <td>东方不败td>
        <td>男td>
    tr>
    <tr>
        <td>3td>
        <td>五毒教主td>
        <td>女td>
    tr>
table>

效果如下：

 

详情请查看：全局 CSS 样式