Bootstrap tables and HTML tables are similar, just encapsulate some CSS for us to use
<table> tags must refer to the class= "table" base class style, we can select the desired style according to the requirements of the main several styles
(1) Table-hover mouse hover on the current row with special effects
(2) table-striped table showing zebra effect
(3) table-bordered table display border
(4) Table-condensed compact form
<!DOCTYPE HTML><HTML><Head> <title> </title> <Scriptsrc= "~/scripts/jquery-2.1.4.min.js"></Script> <Scriptsrc= "~/scripts/bootstrap.min.js"></Script> <Linkhref= "~/content/bootstrap.min.css"rel= "stylesheet" /> <style>. Table{Margin-bottom:30px; }P{Color:Blue; } </style></Head><Body> <Divclass= "Container"> <P>Normal form</P> <Tableclass= "Table Table-hover table-striped table-bordered"> <thead> <TR> <th>Title 1</th> <th>Title 2</th> <th>Title 3</th> </TR> </thead> <tbody> <TR> <TD>Content 1</TD> <TD>Content 2</TD> <TD>Content 3</TD> </TR> <TR> <TD>Content 1</TD> <TD>Content 2</TD> <TD>Content 3</TD> </TR> <TR> <TD>Content 1</TD> <TD>Content 2</TD> <TD>Content 3</TD> </TR> <TR> <TD>Content 1</TD> <TD>Content 2</TD> <TD>Content 3</TD> </TR> </tbody> </Table></Body></HTML>View Code
If you change <div class= "container" > to <div class= "Table-responsive" > A drop-down scroll bar appears when there is too much table content
Will render the following effect
Bootstrap study------tabel
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
