全局CSS样式——代码+表格
css设置表格滚动条需要标记的代码⼀⾏解决，和带你看看怎么⽤Bootstrap做出来的表格如何的好看且省代码1、代码
01、内联代码：通过<code>标签包裹内联样式的代码⽚段
02、 ⽤户输⼊：通过<kbd>标签标记⽤户通过键盘输⼊的内容 03、
基本代码块：
多⾏代码可以使⽤<pre>标签
垂直⽅向展⽰滚动条：<pre class="pre-scrollable">
04、程序输出：通过<samp>标签来标记程序输出的内容
2、表格：
01、基本表格：<table class="table”>
<table class="table">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
02、条纹状表格：<table class="table table-striped">
<table class="table table-striped">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
03、带边框表格：<table class="table table-bordered">
<table class="table table-bordered">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
04、⿏标悬停表格：<table class="table table-hover">
<table class="table table-hover">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
05、 紧缩表格：<table class="table table-condensed">
<table class="table table-condensed">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
06、 状态类 ：
class=“active”:⿏标悬停在⾏或者单元格上时设置颜⾊
class=“success” ：标识成功或积极的动作
class=“info”：标识普通的提⽰信息或动作
class=“warning”：标识警告或需要⽤户注意
class=“danger”：标识危险或潜在的带来负⾯影响的动作
<table class="table table-hover">
<tr class="active">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr class="success">
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr class="warning">
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr class="danger">
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr class="info">
<td>13</td>
<td>14</td>
<td>15</td>
</tr>
</table>
07、响应式表格：<table class="table">，给包括<table>的元素添加class=“table-responsive”
<table class="table table-responsive">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。