如何使Bootstrap表格具有响应性？

Question

我正在尝试使Bootstrap 3表格像这个链接中展示的那样完全响应式。以下是参考CSS：

<style>

    @media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px)
    {

        /* Force table to not be like tables anymore */
        table, thead, tbody, th, td, tr
        {
            display: block;
        }

        /* Hide table headers (but not display: none;, for accessibility) */
        thead tr
        {
            position: absolute;
            top: -9999px;
            left: -9999px;
        }
        tr
        {
            border: 1px solid #ccc;
        }

        td
        {
            /* Behave  like a "row" */
            border: none;
            border-bottom: 1px solid #eee;
            position: relative;
            padding-left: 50%;
        }

        td:before
        {
            /* Now like a table header */
            position: absolute; /* Top/left values mimic padding */
            top: 6px;
            left: 6px;
            width: 45%;
            padding-right: 10px;
            white-space: nowrap;
        }

        /*
Label the data
*/
        td:nth-of-type(1):before
        {
            content: "Sno";
        }
        td:nth-of-type(2):before
        {
            content: "Vehicle Number";
        }
        td:nth-of-type(3):before
        {
            content: "Last Location Timestamp";
        }
        td:nth-of-type(4):before
        {
            content: "Speed (In Km/hr)";
        }
        td:nth-of-type(5):before
        {
            content: "Status";
        }
        td:nth-of-type(6):before
        {
            content: "Address";
        }

    }
</style>

我遇到了以下问题

• 表格数据和表头在同一行上重叠。如下图所示
• 表头被视为行，因此行颜色也会应用于表头值。当屏幕较小时，我希望表头以黑色显示。

HTML：

<div class="table-responsive">
        <table class="table" id="gridSummary">
             <tr class="text-danger"><td>1</td><td>UP14 CL 1557</td><td>09-Mar-2015 17:47:40</td><td>0</td><td>Stop</td><td>23, Link Road, Sahibabad Industrial Area Site 4, Sahibabad, Ghaziabad, Uttar Pradesh 201010, India</td></tr>
        </table>
</div>

有没有什么办法可以修复它？

- writeToBhuwan

---

你能创建一个演示fiddle吗？ - G.L.P

http://www.bootply.com/EJsZ0wRjo3 - writeToBhuwan

Answer 1

只需像这样为td添加!important:

 @media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px)
        {
        ......

        td {
                    /* Behave  like a "row" */
                    border: none;
                    border-bottom: 1px solid #eee;
                    position: relative;
                    padding-left: 50% !important; /* Added important here */
                }

...
}

编辑: 对于小屏幕的文本颜色:

该段内容提到了在小屏幕上的文本颜色问题。

tr.text-danger> td:nth-child(n):before{
  color:blue !important;
}

- G.L.P

---

+1 你真是个天才啊。解决了我的一个问题！在小屏幕上如何显示不同颜色的TH和TD？因为它们目前都是以红色显示的。 - writeToBhuwan

找到了颜色的解决方案。感谢这个简单而美丽的答案！ :) - writeToBhuwan

Answer 2

我在搜索响应式表格时发现了这个。

@media only screen and (max-width: 800px) {
    
    /* Force table to not be like tables anymore */
 #no-more-tables table, 
 #no-more-tables thead, 
 #no-more-tables tbody, 
 #no-more-tables th, 
 #no-more-tables td, 
 #no-more-tables tr { 
  display: block; 
 }
 
 /* Hide table headers (but not display: none;, for accessibility) */
 #no-more-tables thead tr { 
  position: absolute;
  top: -9999px;
  left: -9999px;
 }
 
 #no-more-tables tr { border: 1px solid #ccc; }
 
 #no-more-tables td { 
  /* Behave  like a "row" */
  border: none;
  border-bottom: 1px solid #eee; 
  position: relative;
  padding-left: 50%; 
  white-space: normal;
  text-align:left;
 }
 
 #no-more-tables td:before { 
  /* Now like a table header */
  position: absolute;
  /* Top/left values mimic padding */
  top: 6px;
  left: 6px;
  width: 45%; 
  padding-right: 10px; 
  white-space: nowrap;
  text-align:left;
  font-weight: bold;
 }
 
 /*
 Label the data
 */
 #no-more-tables td:before { content: attr(data-title); }
}

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h1 class="text-center">
                No more tables.
            </h1>
            <h3 class="text-center">
                Resize the browser screen to see how the table changes
            </h3>
        </div>
        <div id="no-more-tables">
            <table class="col-md-12 table-bordered table-striped table-condensed cf">
          <thead class="cf">
           <tr>
            <th>Code</th>
            <th>Company</th>
            <th class="numeric">Price</th>
            <th class="numeric">Change</th>
            <th class="numeric">Change %</th>
            <th class="numeric">Open</th>
            <th class="numeric">High</th>
            <th class="numeric">Low</th>
            <th class="numeric">Volume</th>
           </tr>
          </thead>
          <tbody>
           <tr>
            <td data-title="Code">AAC</td>
            <td data-title="Company">AUSTRALIAN AGRICULTURAL COMPANY LIMITED.</td>
            <td data-title="Price" class="numeric">$1.38</td>
            <td data-title="Change" class="numeric">-0.01</td>
            <td data-title="Change %" class="numeric">-0.36%</td>
            <td data-title="Open" class="numeric">$1.39</td>
            <td data-title="High" class="numeric">$1.39</td>
            <td data-title="Low" class="numeric">$1.38</td>
            <td data-title="Volume" class="numeric">9,395</td>
           </tr>
           <tr>
            <td data-title="Code">AAD</td>
            <td data-title="Company">ARDENT LEISURE GROUP</td>
            <td data-title="Price" class="numeric">$1.15</td>
            <td data-title="Change" class="numeric">+0.02</td>
            <td data-title="Change %" class="numeric">1.32%</td>
            <td data-title="Open" class="numeric">$1.14</td>
            <td data-title="High" class="numeric">$1.15</td>
            <td data-title="Low" class="numeric">$1.13</td>
            <td data-title="Volume" class="numeric">56,431</td>
           </tr>
           <tr>
            <td data-title="Code">AAX</td>
            <td data-title="Company">AUSENCO LIMITED</td>
            <td data-title="Price" class="numeric">$4.00</td>
            <td data-title="Change" class="numeric">-0.04</td>
            <td data-title="Change %" class="numeric">-0.99%</td>
            <td data-title="Open" class="numeric">$4.01</td>
            <td data-title="High" class="numeric">$4.05</td>
            <td data-title="Low" class="numeric">$4.00</td>
            <td data-title="Volume" class="numeric">90,641</td>
           </tr>
           <tr>
            <td data-title="Code">ABC</td>
            <td data-title="Company">ADELAIDE BRIGHTON LIMITED</td>
            <td data-title="Price" class="numeric">$3.00</td>
            <td data-title="Change" class="numeric">+0.06</td>
            <td data-title="Change %" class="numeric">2.04%</td>
            <td data-title="Open" class="numeric">$2.98</td>
            <td data-title="High" class="numeric">$3.00</td>
            <td data-title="Low" class="numeric">$2.96</td>
            <td data-title="Volume" class="numeric">862,518</td>
           </tr>
           <tr>
            <td data-title="Code">ABP</td>
            <td data-title="Company">ABACUS PROPERTY GROUP</td>
            <td data-title="Price" class="numeric">$1.91</td>
            <td data-title="Change" class="numeric">0.00</td>
            <td data-title="Change %" class="numeric">0.00%</td>
            <td data-title="Open" class="numeric">$1.92</td>
            <td data-title="High" class="numeric">$1.93</td>
            <td data-title="Low" class="numeric">$1.90</td>
            <td data-title="Volume" class="numeric">595,701</td>
           </tr>
           <tr>
            <td data-title="Code">ABY</td>
            <td data-title="Company">ADITYA BIRLA MINERALS LIMITED</td>
            <td data-title="Price" class="numeric">$0.77</td>
            <td data-title="Change" class="numeric">+0.02</td>
            <td data-title="Change %" class="numeric">2.00%</td>
            <td data-title="Open" class="numeric">$0.76</td>
            <td data-title="High" class="numeric">$0.77</td>
            <td data-title="Low" class="numeric">$0.76</td>
            <td data-title="Volume" class="numeric">54,567</td>
           </tr>
           <tr>
            <td data-title="Code">ACR</td>
            <td data-title="Company">ACRUX LIMITED</td>
            <td data-title="Price" class="numeric">$3.71</td>
            <td data-title="Change" class="numeric">+0.01</td>
            <td data-title="Change %" class="numeric">0.14%</td>
            <td data-title="Open" class="numeric">$3.70</td>
            <td data-title="High" class="numeric">$3.72</td>
            <td data-title="Low" class="numeric">$3.68</td>
            <td data-title="Volume" class="numeric">191,373</td>
           </tr>
           <tr>
            <td data-title="Code">ADU</td>
            <td data-title="Company">ADAMUS RESOURCES LIMITED</td>
            <td data-title="Price" class="numeric">$0.72</td>
            <td data-title="Change" class="numeric">0.00</td>
            <td data-title="Change %" class="numeric">0.00%</td>
            <td data-title="Open" class="numeric">$0.73</td>
            <td data-title="High" class="numeric">$0.74</td>
            <td data-title="Low" class="numeric">$0.72</td>
            <td data-title="Volume" class="numeric">8,602,291</td>
           </tr>
           <tr>
            <td data-title="Code">AGG</td>
            <td data-title="Company">ANGLOGOLD ASHANTI LIMITED</td>
            <td data-title="Price" class="numeric">$7.81</td>
            <td data-title="Change" class="numeric">-0.22</td>
            <td data-title="Change %" class="numeric">-2.74%</td>
            <td data-title="Open" class="numeric">$7.82</td>
            <td data-title="High" class="numeric">$7.82</td>
            <td data-title="Low" class="numeric">$7.81</td>
            <td data-title="Volume" class="numeric">148</td>
           </tr>
           <tr>
            <td data-title="Code">AGK</td>
            <td data-title="Company">AGL ENERGY LIMITED</td>
            <td data-title="Price" class="numeric">$13.82</td>
            <td data-title="Change" class="numeric">+0.02</td>
            <td data-title="Change %" class="numeric">0.14%</td>
            <td data-title="Open" class="numeric">$13.83</td>
            <td data-title="High" class="numeric">$13.83</td>
            <td data-title="Low" class="numeric">$13.67</td>
            <td data-title="Volume" class="numeric">846,403</td>
           </tr>
           <tr>
            <td data-title="Code">AGO</td>
            <td data-title="Company">ATLAS IRON LIMITED</td>
            <td data-title="Price" class="numeric">$3.17</td>
            <td data-title="Change" class="numeric">-0.02</td>
            <td data-title="Change %" class="numeric">-0.47%</td>
            <td data-title="Open" class="numeric">$3.11</td>
            <td data-title="High" class="numeric">$3.22</td>
            <td data-title="Low" class="numeric">$3.10</td>
            <td data-title="Volume" class="numeric">5,416,303</td>
           </tr>
          </tbody>
         </table>
        </div>
    </div>
    <div class="row">
        <p class="bg-success" style="padding:10px;margin-top:20px"><small><a href="http://elvery.net/demo/responsive-tables/#no-more-tables" target="_blank">Link</a> to original article</small></p>
    </div>
</div>

请查看这里的演示 参考/来源：来自这里 希望这能帮到您。

- Ganesh Salunkhe

---

我希望只使用我在问题中提到的链接来解决这个问题。此外，它并不能解决颜色问题。 - writeToBhuwan