Nhấn vào theo dõi chúng tôi để cập nhật các bài viết mới nhất. Theo dõi!

Hướng dẫn đầy đủ về Table Element

Bài viết liên quan:
Phần tử <table> trong HTML được sử dụng để hiển thị dữ liệu dạng bảng. Bạn có thể coi nó như một cách để mô tả và hiển thị dữ liệu có ý nghĩa trong phần mềm bảng tính. Về cơ bản: cột và hàng. Trong bài viết này, chúng ta sẽ xem xét cách sử dụng chúng, khi nào sử dụng chúng và mọi thứ khác mà bạn cần biết.

Một ví dụ rất cơ bản

Dưới đây là một bản demo rất đơn giản về dữ liệu dạng bảng:
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>ID</th>
      <th>Favorite Color</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jim</td>
      <td>00001</td>
      <td>Blue</td>
    </tr>
    <tr>
      <td>Sue</td>
      <td>00002</td>
      <td>Red</td>
    </tr>
    <tr>
      <td>Barb</td>
      <td>00003</td>
      <td>Green</td>
    </tr>
  </tbody>
</table>
Đó là dữ liệu hữu ích trên nhiều trục. Hãy tưởng tượng bạn lướt ngón tay qua một hàng (ngang) để xem một người và thông tin liên quan về họ. Hoặc lên và xuống một cột (dọc) để biết được sự đa dạng hoặc kiểu dữ liệu tại điểm đó.

Head - Body

Một điều chúng tôi đã không làm trong ví dụ rất cơ bản ở trên là chỉ ra về mặt ngữ nghĩa rằng hàng đầu tiên là tiêu đề của bảng. Chúng ta có lẽ nên có. Toàn bộ hàng đầu tiên không chứa dữ liệu, nó chỉ đơn giản là tiêu đề của các cột. Chúng ta có thể làm điều đó với <thead>, phần tử sẽ bọc phần tử đầu tiên <tr> (nó có thể bọc bao nhiêu hàng nếu cần, tất cả đều là thông tin tiêu đề).
HTML đó sẽ như thế này:
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>ID</th>
      <th>Favorite Color</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jim</td>
      <td>00001</td>
      <td>Blue</td>
    </tr>
    <tr>
      <td>Sue</td>
      <td>00002</td>
      <td>Red</td>
    </tr>
    <tr>
      <td>Barb</td>
      <td>00003</td>
      <td>Green</td>
    </tr>
  </tbody>
</table>
Khi bạn sử dụng <thead>, không được có <tr> đó là con trực tiếp của <table>. Tất cả các hàng phải nằm trong dấu <thead>, <tbody> hoặc <tfoot>. Lưu ý rằng chúng tôi cũng bao gồm tất cả các hàng dữ liệu ở <tbody>.

Foot

Cùng với <thead> và <tbody> có <tfoot> để gói các hàng trong bảng cho biết phần chân của bảng. Giống như <thead>, tốt nhất về mặt ngữ nghĩa cho biết đây không phải là các hàng dữ liệu mà là thông tin phụ trợ.

Trở lại trước HTML5, <tfoot> phần tử bắt buộc phải có sau <thead> và trước đó <tbody>! Bạn có thể nghĩ rằng đó sẽ là điều cuối cùng trước khi kết thúc <table>, nhưng không phải vậy. Bây giờ trong HTML5, hoàn toàn ngược lại, nó phải đi theo những <tbody> gì bạn có thể mong đợi.

Ví dụ, nó có thể được sử dụng để lặp lại tiêu đề trong trường hợp một bảng rất cao/dài về mặt trực quan, nơi có thể dễ dàng nhìn thấy tiêu đề cột ở dưới cùng hơn là trên cùng. Mặc dù bạn không nhất thiết phải sử dụng nó theo cách đó.
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>ID</th>
      <th>Favorite Color</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Name</th>
      <th>ID</th>
      <th>Favorite Color</th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Jim</td>
      <td>00001</td>
      <td>Blue</td>
    </tr>
    <tr>
      <td>Sue</td>
      <td>00002</td>
      <td>Red</td>
    </tr>
    <tr>
      <td>Barb</td>
      <td>00003</td>
      <td>Green</td>
    </tr>
  </tbody>
</table>

td - th

Các ô riêng lẻ của bảng luôn là một trong hai phần tử: <td> hoặc <th>. Bạn có thể đặt bất cứ thứ gì bạn muốn bên trong một ô bảng, nhưng đây là những yếu tố khiến chúng trở thành một ô bảng. <th> là "tiêu đề dạng bảng" và <td> là "dữ liệu dạng bảng".

Sử dụng bản trình diễn đơn giản hiện có của chúng tôi, hàng trên cùng là tất cả các tiêu đề. Không phải dữ liệu, chỉ là tiêu đề cho dữ liệu. Tất cả các hàng còn lại là dữ liệu. Vì thế:
<table>
  <thead>
    <tr>
      <th>&lt;th></th>
      <th>&lt;th></th>
      <th>&lt;th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>&lt;td></td>
      <td>&lt;td></td>
      <td>&lt;td></td>
    </tr>
    <tr>
      <td>&lt;td></td>
      <td>&lt;td></td>
      <td>&lt;td></td>
    </tr>
    <tr>
      <td>&lt;td></td>
      <td>&lt;td></td>
      <td>&lt;td></td>
    </tr>
  </tbody>
</table>
<th> các phần tử không nhất thiết phải giới hạn trong <thead>. Chúng chỉ đơn giản là chỉ ra thông tin tiêu đề. Vì vậy, chúng có thể được sử dụng, ví dụ, ở đầu một hàng trong <tbody>, nếu điều đó có liên quan. Chúng tôi sẽ đề cập đến một trường hợp như vậy sau.

Tạo kiểu cơ bản

Hầu hết các bảng bạn sẽ thấy sử dụng màu sắc và đường kẻ để phân biệt các phần khác nhau của bảng. Biên giới là rất phổ biến. Theo mặc định, tất cả các ô trong bảng đều cách nhau 2px (thông qua biểu định kiểu tác nhân người dùng), như sau:
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>ID</th>
      <th>Favorite Color</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jim</td>
      <td>00001</td>
      <td>Blue</td>
    </tr>
    <tr>
      <td>Sue</td>
      <td>00002</td>
      <td>Red</td>
    </tr>
    <tr>
      <td>Barb</td>
      <td>00003</td>
      <td>Green</td>
    </tr>
  </tbody>
</table>
td, th {
  border: 1px solid #999;
  padding: 0.5rem;
}
Chú ý khoảng cách thừa một chút giữa hàng đầu tiên và phần còn lại. Điều đó là do khoảng cách đường viền mặc định được áp dụng cho <thead> và <tbody> đẩy chúng ra xa nhau một chút. Đây không phải là lợi nhuận, chúng không sụp đổ. Bạn có thể kiểm soát khoảng cách đó như:
table {
  border-spacing: 0.5rem;
}
Nhưng phổ biến hơn nhiều là loại bỏ không gian đó. Thuộc tính đó hoàn toàn bị bỏ qua và không gian bị thu hẹp nếu bạn thực hiện:
table {
  border-collapse: collapse;
}
Chỉ cần một chút đệm, đường viền và làm cho các <th>phần tử đó được căn trái là một chặng đường dài để tạo ra một bảng đơn giản, có kiểu dáng:
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>ID</th>
      <th>Favorite Color</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jim</td>
      <td>00001</td>
      <td>Blue</td>
    </tr>
    <tr>
      <td>Sue</td>
      <td>00002</td>
      <td>Red</td>
    </tr>
    <tr>
      <td>Barb</td>
      <td>00003</td>
      <td>Green</td>
    </tr>
  </tbody>
</table>
table {
  border-collapse: collapse;
}

td, th {
  border: 1px solid #999;
  padding: 0.5rem;
  text-align: left;
}

Kết nối các ô

Có hai thuộc tính quan trọng có thể có trên bất kỳ phần tử ô bảng nào (<th> hoặc <td>): colspan và rowspan. Họ chấp nhận bất kỳ số nguyên dương 2 hoặc lớn hơn. Nếu một td có sải màu là 2 (tức là <td colspan="2">) thì nó sẽ vẫn là một ô duy nhất, nhưng nó sẽ chiếm không gian của hai ô liên tiếp theo chiều ngang. Tương tự như vậy với rowspan, nhưng theo chiều dọc.
<table>
  <tr>
    <td>This</td>
    <td>Little</td>
    <td>Piggy</td>
    <td>Went</td>
    <td>To</td>
    <td>Market</td>
  </tr>
  <tr>
    <td colspan="2">This</td>
    <td>Little</td>
    <td>Piggy</td>
    <td>Went</td>
    <td>To</td>
  </tr>
    <tr>
    <td colspan="4">This</td>
    <td rowspan="3">Little</td>
    <td>Piggy</td>
  </tr>
  <tr>
    <td rowspan="2">This</td>
    <td>Little</td>
    <td>Piggy</td>
    <td>Went</td>
    <td>To</td>
  </tr>
  <tr>
    <td>Little</td>
    <td>Piggy</td>
    <td>Went</td>
    <td>To</td>
  </tr>
</table>
table {
  border-spacing: 0.5rem;
}
td {
  padding: 0.5rem;
}

td:nth-child(1) { background: hsl(150, 50%, 50%); }
td:nth-child(2) { background: hsl(160, 60%, 50%); }
td:nth-child(3) { background: hsl(170, 70%, 50%); }
td:nth-child(4) { background: hsl(180, 80%, 50%); }
td:nth-child(5) { background: hsl(190, 90%, 50%); }
td:nth-child(6) { background: hsl(200, 99%, 50%); }
Bạn sẽ phải tính nhẩm một chút khi bắt đầu làm việc với các ô được kết nối. Colspan khá dễ dàng. Bất kỳ ô nào trong bảng đều có giá trị là một, trừ khi nó có một colspanthuộc tính và sau đó nó có giá trị nhiều như vậy. Cộng các giá trị cho mỗi ô bảng trong hàng bảng đó để nhận giá trị cuối cùng. Mỗi hàng phải có chính xác giá trị đó, nếu không bạn sẽ nhận được bố cục bảng khó hiểu không tạo thành hình chữ nhật (hàng dài nhất sẽ nhô ra ngoài).
Rowspan cũng tương tự, nó chỉ khó hơn một chút và giống như một bước nhảy vọt về tinh thần, bởi vì các cột không được nhóm lại như các hàng. Nếu một phần tử bảng có một rowspan thuộc tính, nó sẽ kéo dài qua hai hàng theo chiều dọc. Điều đó có nghĩa là hàng bên dưới nó được +1 đối với số ô trong bảng và cần ít ô bảng hơn để hoàn thành hàng.
Việc tìm ra trong đầu bạn có thể hơi khó xử, nhưng chúng tôi là nhà phát triển ở đây, chúng tôi có thể làm được =).
Thường thì những thuộc tính này được sử dụng theo những cách thực sự đơn giản như kết nối một vài tiêu đề bảng có liên quan:
<table id="table-example-1"><caption>Specification values: <b>Steel</b>, <b>Castings</b>,
   Ann. A.S.T.M. A27-16, Class B;* P max. 0.06; S max. 0.05.</caption>
   <thead><tr><th rowspan="2">Grade.</th>
     <th rowspan="2">Yield Point.</th>
     <th colspan="2">Ultimate tensile strength</th>
     <th rowspan="2">Per cent elong. 50.8&nbsp;mm or&nbsp;2&nbsp;in.</th>
     <th rowspan="2">Per cent reduct. area.</th>
    </tr><tr><th>kg/mm<sup>2</sup></th>
     <th>lb/in<sup>2</sup></th>
    </tr></thead><tbody><tr><td>Hard</td>
     <td>0.45 ultimate</td>
     <td>56.2</td>
     <td>80,000</td>
     <td>15</td>
     <td>20</td>
    </tr><tr><td>Medium</td>
     <td>0.45 ultimate</td>
     <td>49.2</td>
     <td>70,000</td>
     <td>18</td>
     <td>25</td>
    </tr><tr><td>Soft</td>
     <td>0.45 ultimate</td>
     <td>42.2</td>
     <td>60,000</td>
     <td>22</td>
     <td>30</td>
    </tr></tbody></table>
#table-example-1 { 
  border: solid thin; 
  border-collapse: collapse; 
}
#table-example-1 caption { 
  padding-bottom: 0.5em; 
}
#table-example-1 th, 
#table-example-1 td { 
  border: solid thin;
  padding: 0.5rem 2rem;
}
#table-example-1 td {
  white-space: nowrap;
}
#table-example-1 th { 
  font-weight: normal; 
}
#table-example-1 td { 
  border-style: none solid; 
  vertical-align: top; 
}
#table-example-1 th { 
  padding: 0.2em; 
  vertical-align: middle; 
  text-align: center; 
}

#table-example-1 tbody td:first-child::after { 
  content: leader(". "); '
}

body {
  padding: 1rem;
}

Rộng chừng nào họ cần ... Hoặc lấp đầy thùng chứa ... Hoặc xa hơn

Bản thân phần tử bảng là không bình thường về độ rộng của nó. Nó hoạt động giống như một phần tử cấp khối (ví dụ <div>) trong đó nếu bạn đặt hết bảng này sang bảng khác, mỗi bảng sẽ chia thành dòng riêng của nó. Nhưng chiều rộng thực tế của bàn chỉ rộng như nó cần.
<div class="wrap">
<table>
  <tr>
    <td>test</td>
  </tr>
</table>
<table>
  <tr>
    <td>longer</td>
  </tr>
</table>
<table>
  <tr>
    <td>I'm pretty wide, really.</td>
  </tr>
</table>
  <table>
  <tr>
    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla provident modi aut debitis minus temporibus tempore saepe quas hic ratione itaque quo quisquam earum.</td>
  </tr>
</table>
</div>
body {
  background: #ccc;
}
.wrap {
  width: 300px;
  margin: 0 auto;
  background: white;
}
table {
  border: 1px solid red;
  margin: 5px 0;
}
Nếu lượng văn bản trong hàng rộng nhất của bảng chỉ có chiều rộng 100px, thì bảng sẽ có chiều rộng 100px. Nếu số lượng văn bản (nếu được đặt trên một dòng) sẽ rộng hơn vùng chứa, nó sẽ bao bọc.
Tuy nhiên, nếu văn bản được thông báo là không quấn (tức là white-space: nowrap;) bảng sẽ vui vẻ thoát ra khỏi vùng chứa và đi rộng hơn. Các ô của bàn cũng sẽ không bọc, vì vậy nếu có quá nhiều để vừa, bảng cũng sẽ rộng hơn.
<div class="wrap">
<table>
  <tr>
    <td class="nowrap">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</td>
  </tr>
</table>
<table class="many-cells">
  <tr>
    <td>a</td>
    <td>a</td>
    <td>a</td>
    <td>a</td>
    <td>a</td>
    <td>a</td>
    <td>a</td>
    <td>a</td>
    <td>a</td>
    <td>a</td>
    <td>a</td>
    <td>a</td>
    <td>a</td>
    <td>a</td>
    <td>a</td>
    <td>a</td>
    <td>a</td>
    <td>a</td>
    <td>a</td>
    <td>a</td>
  </tr>
</table>
</div>
body {
  background: #ccc;
}
.wrap {
  width: 300px;
  margin: 0 auto;
  background: white;
}
table {
  border: 1px solid red;
  margin: 5px 0;
}
.nowrap {
  white-space: nowrap;
}
.many-cells td {
  padding: 5px;
  border: 1px solid green;
}

Hai trục bảng

Đôi khi, dữ liệu dạng bảng có hai trục cũng có ý nghĩa. Giống như một tình huống tham khảo chéo. Bảng cửu chương là một ví dụ về điều này:
<table>
  <tr>
    <th>1</th>
    <th>2</th>
    <th>3</th>
    <th>4</th>
    <th>5</th>
  </tr>
  <tr>
    <th>2</th>
    <td>4</td>
    <td>6</td>
    <td>8</td>
    <td>10</td>
  </tr>
  <tr>
    <th>3</th>
    <td>6</td>
    <td>9</td>
    <td>12</td>
    <td>15</td>
  </tr>
  <tr>
    <th>4</th>
    <td>8</td>
    <td>12</td>
    <td>16</td>
    <td>20</td>
  </tr>
  <tr>
    <th>5</th>
    <td>10</td>
    <td>15</td>
    <td>20</td>
    <td>25</td>
  </tr>
</table>
td, th {
  width: 4rem;
  height: 2rem;
  border: 1px solid #ccc;
  text-align: center;
}
th {
  background: lightblue;
  border-color: white;
}
body {
  padding: 1rem;
}
Tôi có thể bỏ qua một <thead> trong tình huống này mặc dù hàng đầu tiên đó đều là tiêu đề. Nó chỉ không quan trọng hơn cột dọc của tiêu đề vì vậy sẽ cảm thấy kỳ lạ khi chỉ nhóm hàng trên cùng đó một mình. Chỉ cần thực hiện trên hàng của tất cả <th> và sau đó mỗi hàng tiếp theo chỉ với ô đầu tiên là <th>.

Làm cho các yếu tố ngữ nghĩa hoạt động như một bảng

CSS có các thuộc tính để làm cho bất kỳ phần tử nào bạn muốn hoạt động như thể nó là một phần tử bảng. Về cơ bản, bạn sẽ cần phải cấu trúc chúng giống như bạn làm với một bảng và nó sẽ phải tuân theo cùng một nguồn-thứ tự-phụ thuộc như một bảng, nhưng bạn có thể làm điều đó. Tôi cũng không nhồi nhét nó, đôi khi nó thực sự hữu ích. Nếu kiểu bố cục đó giải quyết được một vấn đề và không có ý nghĩa trật tự tiêu cực, hãy sử dụng nó.
Không sử dụng các kiểu nội tuyến, nhưng chỉ để hiểu đây là cách diễn ra:
<section style="display: table;">
  <header style="display: table-row;">
    <div style="display: table-cell;"></div>
    <div style="display: table-cell;"></div>
    <div style="display: table-cell;"></div>
  </header>
  <div style="display: table-row;">
    <div style="display: table-cell;"></div>
    <div style="display: table-cell;"></div>
    <div style="display: table-cell;"></div>
  </div>
</section>
Một mẹo hữu ích ở đây là bạn thậm chí không cần phần tử table-row trong đó nếu bạn không muốn. Một loạt các display: table-cell; phần tử là con của một display: table; phần tử sẽ hoạt động giống như tất cả chúng nằm trong một hàng.
Bạn luôn thay đổi thuộc tính hiển thị của phần tử để có được hành vi kiểu bảng. Đây là các giá trị:
display: table                /* <table>     */
display: table-cell           /* <td>        */
display: table-row            /* <tr>        */
display: table-column         /* <col>       */
display: table-column-group   /* <colgroup>  */
display: table-footer-group   /* <tfoot>     */
display: table-header-group   /* <thead>     */
Chú ý không có <th> giải pháp thay thế. Điều đó chỉ dành cho giá trị ngữ nghĩa. Mặt khác, nó hoạt động giống như một <td>, vì vậy, không cần phải sao chép nó trong CSS. Ngoài ra còn display: inline-table; có một điều khá thú vị. 
Hãy nhớ rằng chúng ta đã nói về độ rộng các phần tử bảng kỳ lạ như thế nào ở trên. Chúng chỉ rộng đến mức cần thiết, nhưng vẫn đột phá vào các tuyến mới. Nó gần giống như chúng là các phần tử khối nội tuyến có thể bị vỡ. Điều này làm cho chúng thực sự giống như các phần tử khối nội tuyến, không có sự phá vỡ.

Tất cả các yếu tố liên quan đến bảng

Có một vài yếu tố ở trên mà chúng tôi chưa đề cập đến. Hãy xem xét tất cả các yếu tố liên quan đến bảng HTML. Bạn biết không, chúng tôi cũng có thể sử dụng bảng để làm điều đó:
Yếu tố Nó là gì
<table> Bảng chính nó
<caption> Chú thích cho bảng. Giống như một bức tranh mô tả cho một con số.
<thead> Tiêu đề bảng
<tbody> Thân bảng
<tfoot> Chân trang bảng
<tr> Một hàng bảng
<th> Một ô trong bảng là tiêu đề
<td> Một ô trong bảng là dữ liệu
<col> Một cột (một phần tử không có nội dung)
<colgroup> Một nhóm cột

Tất cả các thuộc tính liên quan đến bảng

Đáng ngạc nhiên là có rất ít thuộc tính dành riêng cho bảng. Tất nhiên bạn có thể sử dụng lớp và ID và tất cả các thuộc tính toàn cầu điển hình. Đã từng có khá nhiều mẫu, nhưng hầu hết chúng đều dành riêng cho việc tạo kiểu và do đó không được dùng nữa (vì đó là công việc của CSS).
Thuộc tính Đã tìm thấy (các) phần tử Những gì nó làm
colspan th, td mở rộng ô rộng bằng 2 ô trở lên
rowspan th, td mở rộng một ô để có chiều cao bằng 2 ô trở lên
span col Làm cho cột áp dụng cho nhiều hơn 2 hoặc nhiều cột
sortable table Cho biết bảng sẽ cho phép sắp xếp. CẬP NHẬT: Tôi được thông báo rằng điều này đã bị xóa khỏi thông số kỹ thuật vì thiếu triển khai.
headers td chuỗi được phân tách bằng dấu cách tương ứng với ID của các <th>phần tử có liên quan đến dữ liệu
scope th row | col | rowgroup | colgroup (default) – về cơ bản chỉ định trục của tiêu đề. Mặc định là tiêu đề đang hướng đến một cột, đây là tiêu đề điển hình, nhưng một hàng cũng có thể bắt đầu bằng tiêu đề, nơi bạn sẽ phân chia tiêu đề đó cho hàng hoặc nhóm hàng.

Thuộc tính không được dùng nữa

Thuộc tính không được dùng nữa Dùng gì thay thế
align Sử dụng float thay thế
valign Sử dụng vertical-align thay thế
char Câu trả lời đúng là sử dụng text-align: "x"; nơi x là ký tự để căn chỉnh, nhưng nó chưa được triển khai ở bất kỳ đâu. Nhưng thuộc tính này cũng không được hỗ trợ, vì vậy không có tổn thất lớn.
charoff Xem ở trên
bgcolor Sử dụng background thay thế
abbr “Hãy cân nhắc việc bắt đầu nội dung ô bằng chính nội dung viết tắt độc lập hoặc sử dụng nội dung viết tắt làm nội dung ô và sử dụng nội dung dài làm mô tả ô bằng cách đặt nó vào title thuộc tính”
axis Sử dụng scope thay thế
border Sử dụng border thay thế
cellpadding Sử dụng padding thay thế
cellspacing Sử dụng border-spacing thay thế
frame Sử dụng border thay thế
rules Thuộc tính người dùng border thay thế
summary Sử dụng <caption>phần tử thay thế
width Sử dụng width thay thế

Ngăn xếp bảng

Có một cách xếp chồng theo chiều dọc ngụ ý của các phần tử bảng, giống như trong bất kỳ kịch bản cha> con nào của HTML. Điều quan trọng là phải hiểu trong bảng bởi vì nó có thể đặc biệt hấp dẫn khi áp dụng những thứ như nền cho chính bảng hoặc các hàng trong bảng, chỉ để nền trên một ô trong bảng "ghi đè" nó (nó thực sự chỉ nằm ở trên cùng).
Đây là cách nó trông (sử dụng tính năng Firefox 3D trong các công cụ dành cho nhà phát triển của nó):

Quy tắc kiểu quan trọng cho bảng

Thuộc tính CSS Những giá trị khả thi Những gì nó làm
vertical-align baseline
sub
super
text-top
text-bottom
middle
top
bottom
%
length
Căn chỉnh nội dung bên trong ô. Hoạt động đặc biệt tốt trong các bảng, mặc dù chỉ có phần trên / dưới / giữa có ý nghĩa nhiều trong bối cảnh đó.
white-space normal
pre
nowrap
pre-wrap
pre-line
Kiểm soát cách văn bản bao bọc trong một ô. Một số dữ liệu có thể cần phải nằm trên một dòng để có ý nghĩa.
border-collapse collapse
separate
Được áp dụng vào bảng để xác định xem các đường viền có thu gọn vào chính chúng hay không (giống như lề chỉ thu gọn hai chiều) hay không. Điều gì sẽ xảy ra nếu hai đường viền thu gọn vào nhau có phong cách trái ngược nhau (như màu sắc)? Các kiểu áp dụng cho các loại phần tử này sẽ “thắng”, theo thứ tự “độ mạnh”: ô, hàng, nhóm hàng, cột, nhóm cột, bảng.
border-spacing length Nếu border-collapse có separate, bạn có thể chỉ định khoảng cách giữa các ô với nhau. Phiên bản hiện đại của cellspacing thuộc tính. Và nói về điều đó, padding là phiên bản hiện đại của cellpadding.
width length Chiều rộng hoạt động trên các ô của bảng giống như cách bạn nghĩ, ngoại trừ khi có một số loại xung đột. Ví dụ: nếu bạn yêu cầu bản thân bảng có chiều rộng 400px thì ô đầu tiên của hàng ba ô sẽ có chiều rộng 100px và để yên các ô khác, ô đầu tiên đó sẽ rộng 100px và hai ô còn lại sẽ chia nhỏ không gian còn lại. Nhưng nếu bạn nói cả ba đều có chiều rộng 10000px, bảng sẽ vẫn là 400px và nó sẽ chỉ cung cấp cho mỗi người trong số chúng một phần ba không gian. Đó là giả sử khoảng trắng hoặc các yếu tố như hình ảnh không phát huy tác dụng. Đây có lẽ là toàn bộ bài viết của chính nó!
border length Border hoạt động trên bất kỳ phần tử nào của bảng và theo cách bạn mong đợi. Những điều kỳ quặc xuất hiện khi bạn thu gọn biên giới. Trong trường hợp này, tất cả các ô của bảng sẽ chỉ có một chiều rộng đường viền giữa chúng, thay vì hai đường viền mà bạn mong đợi chúng có (đường viền bên phải trên ô đầu tiên và đường viền bên trái trên ô tiếp theo). Để xóa đường viền trong môi trường thu gọn, cả hai ô cần phải "đồng ý" để xóa đường viền đó. Giống như td:nth-child(2) { border-right: 0; } td:nth-child(3) { border-left: 0; } Mặt khác, thứ tự / đặc điểm nguồn sẽ thắng đường viền nào được hiển thị trên cạnh nào.
table-layout auto
fixed
auto là mặc định. Chiều rộng của bảng và các ô của nó phụ thuộc vào nội dung bên trong. Nếu bạn thay đổi điều này thành fixed, chiều rộng bảng và cột được đặt bằng chiều rộng của các phần tử bảng và cột hoặc bằng chiều rộng của hàng ô đầu tiên. Các ô trong các hàng tiếp theo không ảnh hưởng đến độ rộng của cột, điều này có thể tăng tốc độ hiển thị. Nếu nội dung trong các ô tiếp theo không thể khớp, thuộc tính tràn sẽ xác định điều gì sẽ xảy ra.
Danh sách này không đầy đủ. Có những câu hỏi khác về CSS có liên quan đến bảng. Ví dụ: bạn không thể định vị tương đối một ô trong bảng để di chuyển nó xung quanh hoặc định vị tuyệt đối mọi thứ bên trong nó. Có nhiều cách mặc dù.
Nếu bạn có thể nghĩ ra nhiều điều kỳ lạ hơn về CSS với các bảng, hãy chia sẻ trong phần bình luận bên dưới.

Đặt lại kiểu bảng mặc định

Thiết lập lại CSS phổ biến nhất trên thế giới, Meyer Reset, thực hiện điều này với các bảng:
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

Đánh dấu cột/hàng/ô khi di chuột

Và ở đây tôi đã kết hợp cả đánh dấu hàng và cột. Tôi đã sử dụng jQuery để tạo tất cả 12 dòng mã (JavaScript thô đang trở nên khá mệt mỏi).
<table class="zebra"> 
<thead> 
<tr> 
    <th>Last Name</th> 
    <th>First Name</th> 
    <th>Email</th> 
    <th>Due</th> 
    <th>Web Site</th> 
</tr> 
</thead> 
<tbody> 
<tr id='row'> 
    <td>Smith</td> 
    <td>John</td> 
    <td>jsmith@gmail.com</td> 
    <td>$50.00</td> 
    <td>http://www.jsmith.com</td> 
</tr> 
<tr> 
    <td>Bach</td> 
    <td>Frank</td> 
    <td>fbach@yahoo.com</td> 
    <td>$50.00</td> 
    <td>http://www.frank.com</td> 
</tr> 
<tr> 
    <td>Doe</td> 
    <td>Jason</td> 
    <td>jdoe@hotmail.com</td> 
    <td>$100.00</td> 
    <td>http://www.jdoe.com</td> 
</tr> 
<tr> 
    <td>Conway</td> 
    <td>Tim</td> 
    <td>tconway@earthlink.net</td> 
    <td>$50.00</td> 
    <td>http://www.timconway.com</td> 
</tr> 
</tbody> 
</table>
body {
  font: normal medium/1.4 sans-serif;
}
table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  padding: 0.25rem;
  text-align: left;
  border: 1px solid #ccc;
}
.hover {
  background: yellow;
}
var allCells = $("td, th");

allCells
  .on("mouseover", function() {
    var el = $(this),
        pos = el.index();
    el.parent().find("th, td").addClass("hover");
    allCells.filter(":nth-child(" + (pos+1) + ")").addClass("hover");
  })
  .on("mouseout", function() {
    allCells.removeClass("hover");
  });

Tìm kiếm bảng

Việc sắp xếp bảng có thể khá phức tạp, việc tìm kiếm bảng có thể khá dễ dàng. Thêm đầu vào tìm kiếm và nếu giá trị trong đó khớp với văn bản ở bất kỳ vị trí nào trong hàng, hãy hiển thị và ẩn các giá trị khác. Với jQuery có thể dễ dàng như sau:
<section class="container">

  <h2>Light Javascript Table Filter</h2>

  <input type="search" class="light-table-filter" data-table="order-table" placeholder="Filter">

  <table class="order-table table">
    <thead>
      <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Phone</th>
        <th>Price</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John Doe</td>
        <td>john.doe@gmail.com</td>
        <td>0123456789</td>
        <td>99</td>
      </tr>
      <tr>
        <td>Jane Vanda</td>
        <td>jane@vanda.org</td>
        <td>9876543210</td>
        <td>349</td>
      </tr>
      <tr>
        <td>Alferd Penyworth</td>
        <td>alfred@batman.com</td>
        <td>6754328901</td>
        <td>199</td>
      </tr>
    </tbody>
  </table>

</section>
(function(document) {
  'use strict';

  var LightTableFilter = (function(Arr) {

    var _input;

    function _onInputEvent(e) {
      _input = e.target;
      var tables = document.getElementsByClassName(_input.getAttribute('data-table'));
      Arr.forEach.call(tables, function(table) {
        Arr.forEach.call(table.tBodies, function(tbody) {
          Arr.forEach.call(tbody.rows, _filter);
        });
      });
    }

    function _filter(row) {
      var text = row.textContent.toLowerCase(), val = _input.value.toLowerCase();
      row.style.display = text.indexOf(val) === -1 ? 'none' : 'table-row';
    }

    return {
      init: function() {
        var inputs = document.getElementsByClassName('light-table-filter');
        Arr.forEach.call(inputs, function(input) {
          input.oninput = _onInputEvent;
        });
      }
    };
  })(Array.prototype);

  document.addEventListener('readystatechange', function() {
    if (document.readyState === 'complete') {
      LightTableFilter.init();
    }
  });

})(document);

Bảng được tạo bằng JavaScript

JavaScript cung cấp một số phương pháp rất cụ thể để xử lý các bảng thông qua HTMLTableElementAPI. Louis Lazaris đã viết một chút về nó gần đây. Bạn có thể sử dụng nó để tạo bảng bằng JavaScript, truy cập các phần tử con và thay đổi thuộc tính theo những cách rất cụ thể. Đây là trang MDN với tin sốt dẻo.
td, th {
  padding: 10px;
  border: 1px solid #ccc;
}
body {
  padding: 1rem;
}
var table = document.createElement('table'),
    tbody = document.createElement('tbody'),
    i, rowcount;

table.appendChild(tbody);

for (i = 0; i <= 3; i++) {
  tbody.insertRow(i);
  for (x = 0; x <= 2; x++) {
    tbody.rows[i].insertCell(x);
    tbody.rows[i].cells[x].appendChild(
        document.createTextNode('Row ' + i + ', Col ' + x)
    );
  }
}

table.createCaption();
table.caption.appendChild(
  document.createTextNode('A DOM-generated Table')
);

document.body.appendChild(table);

Sắp xếp bảng

Hãy tưởng tượng một bảng có hai cột. Một cho ID của Nhân viên và một cho Địa chỉ Email của Nhân viên. Có tiêu đề cho mỗi cột. Sẽ rất tiện nếu có thể nhấp vào các tiêu đề đó và sắp xếp bảng theo dữ liệu bên trong. Ví dụ: thứ tự số, xen kẽ giữa tăng dần và giảm dần, cho ID và theo thứ tự bảng chữ cái cho địa chỉ email. Đó là tất cả những gì sắp xếp bảng. Làm cho dữ liệu hữu ích hơn.
Tại thời điểm viết bài này, tôi không biết có trình duyệt nào hỗ trợ sắp xếp bảng nguyên bản. Nhưng có rất nhiều tùy chọn của bên thứ ba!
Tập lệnh sắp xếp bảng và chữ thường là gì? Dù sao đi nữa, đây là bản demo của trình tạo bảng:
<h2>House Campaigns <i class="icon-minus"></i></h2>
<table class="numbers table2">
  <thead>
  <tr class="header">
    <th class="name">Name</th><th>DAU Stats</th><th>Revenue</th><th>Spent</th><th>Expenses</th><th>Final Profit</th><th>Margin</th>
  </tr>
  </thead>
  <tbody>
  <tr class="good">
    <td><a href="#">Publisher 1</a></td>
    <td class="number">213,450</td>
    <td class="money">$13,923.55</td>
    <td class="money"></td>
    <td class="money">$0.00</td>
    <td class="money">$13,923.55</td>
    <td class="percent">100% <i class="icon-up-bold"></i></td>
  </tr>
  <tr class="good">
    <td><a href="#">Publisher 2</a></td>
    <td class="number">1,020</td>
    <td class="money">$202.35</td>
    <td class="money"></td>
    <td class="money">$0.00</td>
    <td class="money">$202.35</td>
    <td class="percent">100% <i class="icon-arrow-combo"></i></td>
  </tr>
  <tr class="good">
    <td><a href="#">Publisher 3</a></td>
    <td class="number">11,450</td>
    <td class="money">$831.07</td>
    <td class="money">$0.74</td>
    <td class="money">$0.00</td>
    <td class="money">$830.33</td>
    <td class="percent">99.9% <i class="icon-up-bold"></i></td>
  </tr>
  <tr class="good">
    <td><a href="#">Publisher 4</a></td>
    <td class="number">4</td>
    <td class="money">$36.38</td>
    <td class="money"></td>
    <td class="money">$0.00</td>
    <td class="money">$36.38</td>
    <td class="percent">100% <i class="icon-up-bold"></i></td>
  </tr>
  </tbody>
  <tfoot>
  <tr class="summary">
    <td>Summary</td>
    <td class="number">225,924 </td>
    <td class="money">$14,993.35</td>
    <td class="money">$0.74</td>
    <td class="money">$0.00</td>
    <td class="money">$14,992.61</td>
    <td class="percent">100%</td>
  </tr>
  </tfoot>
</table>

<h2>EXE Publisher <i class="icon-minus"></i></h2>
<table class="numbers table3">
  <thead>
  <tr class="header">
    <th class="name">Name</th><th>DAU Stats</th><th>Revenue</th><th>Spent</th><th>Expenses</th><th>Final Profit</th><th>Margin</th>
  </tr>
  </thead>
  <tbody>
  <tr class="awful">
    <td><a href="#">Publisher 10</a></td>
    <td class="number">48,444</td>
    <td class="money">$613.35</td>
    <td class="money">$670.80</td>
    <td class="money">$41.35</td>
    <td class="money">($98.80)</td>
    <td class="percent">-16.1% <i class="icon-down-bold"></i></td>
  </tr>
  <tr class="awful">
    <td><a href="#">Publisher 11</a></td>
    <td class="number">8842</td>
    <td class="money">$7.23</td>
    <td class="money">$2.13</td>
    <td class="money">$7.55</td>
    <td class="money">($2.44)</td>
    <td class="percent">-33.8% <i class="icon-arrow-combo"></i></td>
  </tr>
  <tr class="good">
    <td><a href="#">Publisher 12</a></td>
    <td class="number">122444</td>
    <td class="money">$642.87</td>
    <td class="money">$82.45</td>
    <td class="money">$104.51</td>
    <td class="money">$445.91</td>
    <td class="percent">70.9% <i class="icon-up-bold"></i></td>
  </tr>
  <tr class="good">
    <td><a href="#">Publisher 13</a></td>
    <td class="number">8778</td>
    <td class="money">$185.89</td>
    <td class="money">$0.12</td>
    <td class="money">$7.49</td>
    <td class="money">$178.28</td>
    <td class="percent">95.9% <i class="icon-up-bold"></i></td>
  </tr>
  
  <tr class="good publisher14">
    <td><a href="#">Publisher 14</a></td>
    <td class="number">596</td>
    <td class="money">$5.63</td>
    <td class="money">$0.25</td>
    <td class="money">$0.51</td>
    <td class="money">$4.87</td>
    <td class="percent">86.5% <i class="icon-down-bold"></i></td>
  </tr>
  <tr class="row-details">
    <td colspan="7">
      <img src="http://www.jqplot.com/images/linestyles2.jpg" />
      <img src="http://www.jqplot.com/images/barchart.jpg" />
      <img src="http://www.jqplot.com/images/shadow2.jpg" />
      <img src="http://www.jqplot.com/images/linestyles2.jpg" />
      <img src="http://www.jqplot.com/images/barchart.jpg" />
      <img src="http://www.jqplot.com/images/shadow2.jpg" />
    </td>
  </tr>
  <tr class="marginal">
    <td><a href="#">Publisher 15</a></td>
    <td class="number">9153</td>
    <td class="money">$9.64</td>
    <td class="money">$0.09</td>
    <td class="money">$7.81</td>
    <td class="money">$1.73</td>
    <td class="percent">18.0% <i class="icon-up-bold"></i></td>
  </tr>
  </tbody>
  <tfoot>
  <tr class="summary">
    <td>Summary</td>
    <td class="number">154,657</td>
    <td class="money">$1,464.61</td>
    <td class="money">$755.84</td>
    <td class="money">$169.22</td>
    <td class="money">$538.55</td>
    <td class="percent">36.9%</td>
  </tr>
  </tfoot>
</table>
@import "compass/css3";
/* Prototype styles */
 body {
	 background-image: url('http://dannocket.com/sandbox/satinweave.png');
	 font: 0.85em arial, sans-serif;
	 padding: 10px;
}
 h2 {
	 color: #333;
	 margin-bottom: 5px;
	 font-size: 2em;
	 cursor: pointer;
}
 a {
	 color: #0882cb;
	 text-decoration: none;
}
 .numbers a {
	 font-weight: bold;
}
 table, td, th {
	 border: 1px solid #ccc;
}
 table {
	 background-color: #fff;
	 box-shadow: 0 2px 2px #ccc;
	 width: 100%;
}
 td, th {
	 padding: 10px 5px;
}
 th {
	 cursor: pointer;
}
/*.header,.summary {
	 background-color: #aaa;
	 color: #fff;
}
*/
 td {
	 text-align: right;
}
 th, td:nth-child(1) {
	 text-align: left;
}
 .money, .percent {
	 text-align: center;
}
 tr:not(.header,.summary):nth-child(even) {
	 background-color: #eee;
}
 tr.summary, .percent {
	 font-weight: bold;
}
/* Statuses */
 .good {
	 background-color: #f5f8ec;
}
 tr.good:nth-child(even) {
	 background-color: adjust-lightness(#f5f8ec, -5);
}
 .marginal {
	 background-color: #fcf9ca;
}
 tr.marginal:nth-child(even) {
	 background-color: adjust-lightness(#fcf9ca, -5);
}
 .awful {
	 background-color: #fcc;
}
 tr.awful:nth-child(even) {
	 background-color: adjust-lightness(#fcc, -5);
}
 .awful-highlight {
	 color: #f00;
}
/* Details */
 .row-details {
	 display: none;
	 height: 200px;
}
 .row-details td {
	 text-align: center;
}
 .publisher14 {
	 cursor: pointer;
}
/* Sort table */
 .headerSortDown, .headerSortUp {
	 background-color: #ddd;
}
/* Icon fonts */
 @font-face {
	 font-family: 'fontello';
	 src: url("http://dannocket.com/sandbox/font/fontello.eot");
	 src: url("http://dannocket.com/sandbox/font/fontello.eot?#iefix") format('embedded-opentype'), url("http://dannocket.com/sandbox/font/fontello.woff") format('woff'), url("http://dannocket.com/sandbox/font/fontello.ttf") format('truetype'), url("http://dannocket.com/sandbox/font/fontello.svg#fontello") format('svg');
	 font-weight: normal;
	 font-style: normal;
}
 [class^="icon-"]:before, [class*=" icon-"]:before {
	 font-family: 'fontello';
	 font-style: normal;
	 font-weight: normal;
	 speak: none;
	 display: inline-block;
	 text-decoration: inherit;
	 width: 1em;
	 margin-right: 0.2em;
	 text-align: center;
	 opacity: 0.8;
	/* fix buttons height, for twitter bootstrap */
	 line-height: 1em;
	/* Animation center compensation - magrins should be symmetric */
	/* remove if not needed */
	 margin-left: 0.2em;
	/* you can be more comfortable with increased icons size */
	/* font-size: 120%;
	 */
	/* Uncomment for 3D effect */
	/* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3);
	 */
}
 .icon-plus:before {
	 content: '\2b';
}
/* '+' */
 .icon-minus:before {
	 content: '\2d';
}
/* '-' */
 .icon-star:before {
	 content: '\2605';
}
/* '★' */
 .icon-star-empty:before {
	 content: '\2606';
}
/* '☆' */
 .icon-heart-empty:before {
	 content: '\2661';
}
/* '♡' */
 .icon-heart:before {
	 content: '\2665';
}
/* '♥' */
 .icon-check:before {
	 content: '\2713';
}
/* '✓' */
 .icon-cancel:before {
	 content: '\2715';
}
/* '✕' */
 .icon-plus-circle:before {
	 content: '\2795';
}
/* '➕' */
 .icon-minus-circle:before {
	 content: '\2796';
}
/* '➖' */
 .icon-left-bold:before {
	 content: '\e4ad';
}
/* '' */
 .icon-right-bold:before {
	 content: '\e4ae';
}
/* '' */
 .icon-up-bold:before {
	 content: '\e4af';
}
/* '' */
 .icon-down-bold:before {
	 content: '\e4b0';
}
/* '' */
 .icon-arrow-combo:before {
	 content: '\e74f';
}
/* '' */
/* jqPlot */
 .jqplot-target {
	 position: relative;
	 color: #666;
	 font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	 font-size: 1em;
}
 .jqplot-axis {
	 font-size: 0.75em;
}
 .jqplot-xaxis {
	 margin-top: 10px;
}
 .jqplot-x2axis {
	 margin-bottom: 10px;
}
 .jqplot-yaxis {
	 margin-right: 10px;
}
 .jqplot-y2axis, .jqplot-y3axis, .jqplot-y4axis, .jqplot-y5axis, .jqplot-y6axis, .jqplot-y7axis, .jqplot-y8axis, .jqplot-y9axis, .jqplot-yMidAxis {
	 margin-left: 10px;
	 margin-right: 10px;
}
 .jqplot-axis-tick, .jqplot-xaxis-tick, .jqplot-yaxis-tick, .jqplot-x2axis-tick, .jqplot-y2axis-tick, .jqplot-y3axis-tick, .jqplot-y4axis-tick, .jqplot-y5axis-tick, .jqplot-y6axis-tick, .jqplot-y7axis-tick, .jqplot-y8axis-tick, .jqplot-y9axis-tick, .jqplot-yMidAxis-tick {
	 position: absolute;
	 white-space: pre;
}
 .jqplot-xaxis-tick {
	 top: 0;
	 left: 15px;
	 vertical-align: top;
}
 .jqplot-x2axis-tick {
	 bottom: 0;
	 left: 15px;
	 vertical-align: bottom;
}
 .jqplot-yaxis-tick {
	 right: 0;
	 top: 15px;
	 text-align: right;
}
 .jqplot-yaxis-tick.jqplot-breakTick {
	 right: -20px;
	 margin-right: 0;
	 padding: 1px 5px 1px 5px;
	 z-index: 2;
	 font-size: 1.5em;
}
 .jqplot-y2axis-tick, .jqplot-y3axis-tick, .jqplot-y4axis-tick, .jqplot-y5axis-tick, .jqplot-y6axis-tick, .jqplot-y7axis-tick, .jqplot-y8axis-tick, .jqplot-y9axis-tick {
	 left: 0;
	 top: 15px;
	 text-align: left;
}
 .jqplot-yMidAxis-tick {
	 text-align: center;
	 white-space: nowrap;
}
 .jqplot-xaxis-label {
	 margin-top: 10px;
	 font-size: 11pt;
	 position: absolute;
}
 .jqplot-x2axis-label {
	 margin-bottom: 10px;
	 font-size: 11pt;
	 position: absolute;
}
 .jqplot-yaxis-label {
	 margin-right: 10px;
	 font-size: 11pt;
	 position: absolute;
}
 .jqplot-yMidAxis-label {
	 font-size: 11pt;
	 position: absolute;
}
 .jqplot-y2axis-label, .jqplot-y3axis-label, .jqplot-y4axis-label, .jqplot-y5axis-label, .jqplot-y6axis-label, .jqplot-y7axis-label, .jqplot-y8axis-label, .jqplot-y9axis-label {
	 font-size: 11pt;
	 margin-left: 10px;
	 position: absolute;
}
 .jqplot-meterGauge-tick {
	 font-size: 0.75em;
	 color: #999;
}
 .jqplot-meterGauge-label {
	 font-size: 1em;
	 color: #999;
}
 table.jqplot-table-legend {
	 margin-top: 12px;
	 margin-bottom: 12px;
	 margin-left: 12px;
	 margin-right: 12px;
}
 table.jqplot-table-legend, table.jqplot-cursor-legend {
	 background-color: rgba(255, 255, 255, 0.6);
	 border: 1px solid #ccc;
	 position: absolute;
	 font-size: 0.75em;
}
 td.jqplot-table-legend {
	 vertical-align: middle;
}
 td.jqplot-seriesToggle:hover, td.jqplot-seriesToggle:active {
	 cursor: pointer;
}
 .jqplot-table-legend .jqplot-series-hidden {
	 text-decoration: line-through;
}
 div.jqplot-table-legend-swatch-outline {
	 border: 1px solid #ccc;
	 padding: 1px;
}
 div.jqplot-table-legend-swatch {
	 width: 0;
	 height: 0;
	 border-top-width: 5px;
	 border-bottom-width: 5px;
	 border-left-width: 6px;
	 border-right-width: 6px;
	 border-top-style: solid;
	 border-bottom-style: solid;
	 border-left-style: solid;
	 border-right-style: solid;
}
 .jqplot-title {
	 top: 0;
	 left: 0;
	 padding-bottom: 0.5em;
	 font-size: 1.2em;
}
 table.jqplot-cursor-tooltip {
	 border: 1px solid #ccc;
	 font-size: 0.75em;
}
 .jqplot-cursor-tooltip {
	 border: 1px solid #ccc;
	 font-size: 0.75em;
	 white-space: nowrap;
	 background: rgba(208, 208, 208, 0.5);
	 padding: 1px;
}
 .jqplot-highlighter-tooltip, .jqplot-canvasOverlay-tooltip {
	 border: 1px solid #ccc;
	 font-size: 0.75em;
	 white-space: nowrap;
	 background: rgba(208, 208, 208, 0.5);
	 padding: 1px;
}
 .jqplot-point-label {
	 font-size: 0.75em;
	 z-index: 2;
}
 td.jqplot-cursor-legend-swatch {
	 vertical-align: middle;
	 text-align: center;
}
 div.jqplot-cursor-legend-swatch {
	 width: 1.2em;
	 height: 0.7em;
}
 .jqplot-error {
	 text-align: center;
}
 .jqplot-error-message {
	 position: relative;
	 top: 46%;
	 display: inline-block;
}
 div.jqplot-bubble-label {
	 font-size: 0.8em;
	 padding-left: 2px;
	 padding-right: 2px;
	 color: #141414;
}
 div.jqplot-bubble-label.jqplot-bubble-label-highlight {
	 background: rgba(90, 90, 90, 0.7);
}
 div.jqplot-noData-container {
	 text-align: center;
	 background-color: rgba(96, 96, 96, 0.3);
}
 
/**
  Prototype code
  
  -Known issues:
    - The table sorter is using a string sort instead of a numeric sort as you would expect.
*/

$(document).ready(function() {
  addMarginGraph();
  $('.table2').tablesorter();
  $('.table3').tablesorter();
});

var statusColorGood = "rgba(121,216,121,1)";
var statusColorMarginal = "rgba(255,242,61,1)";

addMarginGraph = function() {
  $('.numbers .percent').each(function(e) {
    var percentage = parseFloat($(this).html());
    var color = "";
    if (percentage >= 0) {
      if (percentage >= 50) {
        color = statusColorGood;
      } else {
        color = statusColorMarginal;
      }
      $(this).css('background',"-webkit-linear-gradient(left, "+color+" 0%,"+color+" "+percentage+"%,rgba(255,255,255,0) "+(percentage+1)+"%,rgba(255,255,255,0) 100%)");
    } else {
      $(this).addClass('awful-highlight');
    }
  });
}
  
$('.publisher14').on('click', function(e) {
  $(this).next('tr').toggle('fast','swing');
});

$('body').on('click', 'h2', function(e) {
  $(this).find('i').toggleClass('icon-minus').toggleClass('icon-plus');
  $(this).next('table').toggle();
});

Getting Info...

Đăng nhận xét

Đồng ý cookie
Chúng tôi cung cấp cookie trên trang web này để phân tích lưu lượng truy cập, ghi nhớ các tùy chọn của bạn và tối ưu hóa trải nghiệm của bạn.
Oops!
Có vẻ như đã xảy ra sự cố với kết nối Internet của bạn. Vui lòng kết nối với internet và bắt đầu duyệt lại.
Trang web bị chặn
Xin lỗi! Trang web này không có sẵn ở quốc gia của bạn.