Question

我有一个HTML代码：

return PartialView("details_comment", publication);

css代码：

<html>
<head>
<link rel="stylesheet" type="text/css" href="SearchCustomerStyle.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Header-->
<div class="container">
    <nav role="navigation" class="navbar navbar-inverse navbar-fixed-top">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <!-- Collection of nav links, forms, and other content for toggling -->
        <div id="navbarCollapse" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li><a href="EyeofHeaven.html">Home</a></li>
                <li><a href="#">About</a></li>
                <li class="dropdown active">
                    <a data-toggle="dropdown" class="dropdown-toggle" href="#">Search<b class="caret"></b></a>
                    <ul role="menu" class="dropdown-menu">
                        <li><a href="#">Search Form(Customer)</a></li>
                        <li><a href="#">Search Form(Vehicle)</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </nav>
</div>

<!-- Search form customer-->
<div class="searchcustomer">
    <ul class="list-group">
        <li class="list-group-item active"><span class="glyphicon glyphicon-th-list"></span><span> Search Customer</span></li>
        <li class="list-group-item">
        <input type="text" size="20" class="form-control" placeholder="Search ID">
        </li>        
        <li class="list-group-item">
        <select class="form-control" id="Regions">
            <option>Regions</option>
        </select>
        </li>
        <li class="list-group-item">
        <button type="button"  class="btn btn-primary"><span class="glyphicon glyphicon-search"></span>Search Info</button>
        </li>
    </ul>
</div>
<!-- Information Table-->
<div class="bs-example">
    <div class="table-responsive"> 
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>Row</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Email</th>
                    <th>Biography</th>
                    <th>Biography</th>
                    <th>Biography</th>
                    <th>Biography</th>
                    <th>Biography</th>
                    <th>Biography</th>
                    <th>Biography</th>
                    <th>Biography</th><th>Biography</th><th>Biography</th><th>Biography</th><th>Biography</th><th>Biography</th><th>Biography</th><th>Biography</th><th>Biography</th><th>Biography</th><th>Biography</th><th>Biography</th><th>Biography</th><th>Biography</th><th>Biography</th><th>Biography</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>John</td>
                    <td>Carter</td>
                    <td>johncarter@mail.com</td>
                    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui.</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Peter</td>
                    <td>Parker</td>
                    <td>peterparker@mail.com</td>
                    <td>Vestibulum consectetur scelerisque lacus, ac fermentum lorem convallis sed. Nam odio tortor, dictum quis malesuada at, pellentesque.</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>John</td>
                    <td>Rambo</td>
                    <td>johnrambo@mail.com</td>
                    <td>Integer pulvinar leo id risus pellentesque vestibulum. Sed diam libero, sodales eget sapien vel, porttitor bibendum enim.</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>John</td>
                    <td>Rambo</td>
                    <td>johnrambo@mail.com</td>
                    <td>Integer pulvinar leo id risus pellentesque vestibulum. Sed diam libero, sodales eget sapien vel, porttitor bibendum enim.</td>
                </tr>
                <tr>
                    <td>5</td>
                    <td>John</td>
                    <td>Rambo</td>
                    <td>johnrambo@mail.com</td>
                    <td>Integer pulvinar leo id risus pellentesque vestibulum. Sed diam libero, sodales eget sapien vel, porttitor bibendum enim.</td>
                </tr>               
            </tbody>
        </table>
    </div>
</div>
</body>
</html>

This is the images that I import to make a background

如何让我的表格将颜色背景设置为白色，当我将表格放入网页时，我的表格背景也是我设置到正文中的背景图像。如何将表格的背景颜色设置为白色？

Answer 1

请使用 background-color

<强> CSS：

.table-responsive{
    max-width: 1200px;
    margin-top:-220px;
    margin-left:200px;
    max-width: auto;
    background-color: white; // Can use hexadecimal color here too (#FFFFFF)
}

<强> Demo

更新@media：

@media all and (max-width: 1028px ){
    body {
        background:url(http://i.stack.imgur.com/DafcS.jpg) no-repeat;
        background-size: contain 100%;
    }
}

Answer 2

使用css printf("(a%%2 == 0) && (b%%2 == 0): %d\n",(a%2 == 0) && (b%2 == 0));

Answer 3

您需要更新.table的css或在表标记中添加新类，并将以下css添加到其中：

background-color: white;

如何在Bootstrap中为响应表着色？

3 个答案: