bootstrap table-bordered删除水平线

Question

我想删除自举表格边框的水平线，并保持垂直线。

我尝试了许多解决方案并完成了许多研究，但我仍然找不到解决方案。

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>First Name</th>
                        <th>Last Name</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Otto</td>
                        <td>@mdo</td>
                    </tr>
                    <tr>
                        <td>Otto</td>
                        <td>@TwBootstrap</td>
                    </tr>
                    <tr>
                        <td>Thornton</td>
                        <td>@fat</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

Answer 1

只需在css文件中添加这些css规则（从constructor(props) { super(props); this.state = { firstName: null, }; this.handleInputChange = this.handleInputChange.bind(this); } componentDidMount() { // This is reducer function to get my data from server. I'm getting data and able to display it to my element. // I'm using redux for my data layer. this.props.getuserDetails(userId); } 删除边框并再次添加到右侧）：

handleInputChange (event) {}
    this.setState({
    firstName: event.target.value
    });
}

＆＃13;

＆＃13;

<TextField name="firstName" onChange={this.handleInputChange} floatingLabelText="First Name" value={this.props.reducer.result.firstName}/>

＆＃13;

td

＆＃13;

＆＃13;

＆＃13;

还要从.table-bordered td {border: none !important; border-right: solid 1px #ccc !important;} 移除边框的另一个片段......

＆＃13;

＆＃13;

.table-bordered td {
  border: none !important;
  border-right: solid 1px #ccc !important;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <table class="table table-bordered">
        <thead>
          <tr>
            <th>First Name</th>
            <th>Last Name</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Otto</td>
            <td>@mdo</td>
          </tr>
          <tr>
            <td>Otto</td>
            <td>@TwBootstrap</td>
          </tr>
          <tr>
            <td>Thornton</td>
            <td>@fat</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

这个CSS应该诀窍：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <table class="table table-bordered">
        <thead>
          <tr>
            <th>First Name</th>
            <th>Last Name</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Otto</td>
            <td>@mdo</td>
          </tr>
          <tr>
            <td>Otto</td>
            <td>@TwBootstrap</td>
          </tr>
          <tr>
            <td>Thornton</td>
            <td>@fat</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

如果要支持包含2列以上的表：

 private function __categoriesTree($id = 2) {
    $category = Mage::getModel('catalog/category');

    $_category = $category->load($id);
    $details = new stdClass();
    list($details->id, $details->name, $details->urlKey, $details->level, $details->children) = [
        $_category->getId(),
        $_category->getName(),
        $_category->getUrlKey(),
        $_category->getLevel(),
        []
    ];

    foreach (array_filter(explode(',', $_category->getChildren())) as $childId) {
        $details->children[] = $this->__categoriesTree($childId);
    }
    if (count($details->children) === 0) {
        unset($details->children);
    }
    return $details;
}

请参阅：https://codepen.io/anon/pen/PKbJNV

Answer 3

如果你真的想使用以表格为边界的类，你也可以在css中这样做。

.table-bordered > tbody > tr > td,
    .table-bordered > thead > tr > td,
    .table-bordered {
        border-bottom:0;
        border-top: 0;
    }