如何使 bootstrap 表响应？

Question

我正在尝试使 bootstrap 3 table 完全响应，就像在 this link. 中所做的那样。以下是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>

我面临以下问题

table数据和tableheader数据在同一行重叠。如图所示
table header 在这里被视为一行，因此行颜色也应用于 header 值。我希望 header 在屏幕较小时显示为黑色。

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>

有什么办法可以解决吗？？

Answer 1

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

@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">.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">.39</td>
            <td data-title="High" class="numeric">.39</td>
            <td data-title="Low" class="numeric">.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">.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">.14</td>
            <td data-title="High" class="numeric">.15</td>
            <td data-title="Low" class="numeric">.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">.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">.01</td>
            <td data-title="High" class="numeric">.05</td>
            <td data-title="Low" class="numeric">.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">.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">.98</td>
            <td data-title="High" class="numeric">.00</td>
            <td data-title="Low" class="numeric">.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">.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">.92</td>
            <td data-title="High" class="numeric">.93</td>
            <td data-title="Low" class="numeric">.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">[=11=].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">[=11=].76</td>
            <td data-title="High" class="numeric">[=11=].77</td>
            <td data-title="Low" class="numeric">[=11=].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">.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">.70</td>
            <td data-title="High" class="numeric">.72</td>
            <td data-title="Low" class="numeric">.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">[=11=].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">[=11=].73</td>
            <td data-title="High" class="numeric">[=11=].74</td>
            <td data-title="Low" class="numeric">[=11=].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">.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">.82</td>
            <td data-title="High" class="numeric">.82</td>
            <td data-title="Low" class="numeric">.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">.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">.83</td>
            <td data-title="High" class="numeric">.83</td>
            <td data-title="Low" class="numeric">.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">.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">.11</td>
            <td data-title="High" class="numeric">.22</td>
            <td data-title="Low" class="numeric">.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>

请看Demo Here

Reference/Source : From Here

希望对您有所帮助。

Answer 2

像这样添加 !important for td:

 @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;
}

如何使 bootstrap 表响应？

How to make bootstrap tables responsive?

html

css

twitter-bootstrap

twitter-bootstrap-3