css - 没有外边框的 Bootstrap 表

标签 css html twitter-bootstrap

我坚持使用 Bootstrap 3。

在我的 html 页面中有一个表 class="table bordeless table1"> 我需要从中删除顶部、左侧和右侧的外边框。尝试了几种解决方案都无济于事。我需要应用什么 CSS?似乎只应用了默认的 Bootstrap 样式。

这是 Plunker:https://plnkr.co/edit/gTK21tStoQn5hTUy4peZ?p=preview

HTML:

<section id='top5'>
    <div class='container table1'>
        <div class='row'>
            <div class='col-md-12 settings'>
                <h4><i class="fa fa-user fa-2x"></i>Настройки > Профиль организации > X5 Retail Group</h4>
                <h4><i class="fa fa-user-plus"></i>Добавить пользователя</h4>
                <br>
                <table class="table bordeless table1">
                    <thead>
                        <tr>
                            <th class='notop' width="28%">ФИО, должность</th>
                            <th width="3%">Контактное лицо</th>
                            <th width="3%">Телефон</th>
                            <th width="10%">E-mail</th>
                            <th width="10%">Уровень доступа</th>
                            <th width="8%">Инженерные системы</th>
                            <th width="5%">Объекты</th>
                            <th width="5%">Изменить</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Иванов Иван Иванович, Технический директор</td>
                            <td class="vert-align"><i class="fa fa-check-square-o"></td>
                            <td>8-916-234-54-21</td>
                            <td>contact@company.ru</td>
                            <td>Администратор</td>
                            <td class="vert-align"><i class="fa fa-check-square-o"><i class="fa fa-check-square-o"><i class="fa fa-check-square-o"><i class="fa fa-check-square-o"><i class="fa fa-check-square-o"><i class="fa fa-check-square-o"></td>
                            <td class="vert-align"><i class="fa fa-industry"></td>
                            <td class="vert-align"><i class="fa fa-pencil-square-o"></td>
                        </tr>
                        <tr>
                            <td>Петров Пётр Петрович, Главный инженер</td>
                            <td class="vert-align"><i class="fa fa-check-square-o"></td>
                            <td>8-916-234-54-21</td>
                            <td>contact@company.ru</td>
                            <td>Мониторинг</td>
                            <td class="vert-align"><i class="fa fa-check-square-o"><i class="fa fa-check-square-o"><i class="fa fa-check-square-o"><i class="fa fa-check-square-o"><i class="fa fa-check-square-o"><i class="fa fa-check-square-o"></td>
                            <td class="vert-align"><i class="fa fa-industry"></td>
                            <td class="vert-align"><i class="fa fa-pencil-square-o"></td>
                        </tr>
                        <tr>
                            <td>Сидоров Сидор Сидорович, Сервисный инженер</td>
                            <td class="vert-align"><i class="fa fa-check-square-o"></td>
                            <td>8-916-234-54-21</td>
                            <td>contact@company.ru</td>
                            <td>Инжиниринг</td>
                            <td class="vert-align"><i class="fa fa-check-square-o"><i class="fa fa-check-square-o"><i class="fa fa-check-square-o"><i class="fa fa-check-square-o"><i class="fa fa-check-square-o"><i class="fa fa-check-square-o"></td>
                            <td class="vert-align"><i class="fa fa-industry"></td>
                            <td class="vert-align"><i class="fa fa-pencil-square-o"></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</section>

最佳答案

技巧是

border-style: hidden

查看我的测试结果,

enter image description here

enter image description here

关于css - 没有外边框的 Bootstrap 表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34612093/

相关文章:

html - Angular 可滚动的垫选择列表?

javascript - 一键提交两份表单并发布到两个不同的 API

javascript - 如何在不同的图像中给出不同的标题?

css - 关闭 twitter bootstrap 工具提示的优雅方式

jquery - Bootstrap 标签输入不适用于 jquery

html - 在(仅)css 中查找浏览器宽度 px 和高度 px

javascript - 在 A-Frame 视频和视频球体中不适用于移动和平板设备

html - 响应式网页上带有图像的 CSS 错误

CSS展开框动画

css - 如何使用 Bootstrap v4 构建多行内联表单?