Bootstrap 4 Table 列大小调整未按预期响应

Question

作为 bootstrap 的新手并且通常使用 html/css 编写脚本，我正在尝试创建一个简单的 html table（一行三列）。每列都应该是偶数的（占据其中存在的 table 的三分之一。我遇到的问题是它似乎只占可用 table 的三分之二 (2/3) =35=] 在 table 中。我在互联网上寻找解决方案，用谷歌搜索，在堆栈和其他地方阅读了几个 posts/articles，但我没有找到解决方案，我希望寻求帮助。

You can see a straight html render of the error here

这是一张详细说明问题的图片：

如示例图像所示，红色细柱占据了 table space 的三分之一（绿色边框 table），但是 table 不是扩展以占据红色 div 可用的全部 space。我通过 html 渲染进行了查找，但没有找到问题的原因。

<div class="area">
        <section class="wrapper scrollable">
            <div class="main-grid">
                <div class="agile-grids">
                    <!-- blank-page -->
                    <div class="blank">
                        <div class="blank-page">
                            <h1>Session is active</h1>


<table class=" " style="border: 1px solid red;">
    <tbody>
        <tr scope="row" style="border: 1px solid red;">
            <td class="text-center" style="border: 1px solid green;">
                <div class="col-lg-4 col-md-6 col-sm-12" style="border: 1px solid red;">
                <div class="card_user-charProfile">
                    <img class=" img-fluid" style="width: 100%;" src="http://localhost/wBase/zUploads/cImg/3bgCard.jpg" alt="Wiccan">

                    <div class="card">
                        <div class="card">
                            <p> content goes here</p></div>
                        </div>
                    </div> <!-- end row -->
                </div><!-- end CHARACTER PROFILE OUTER DIV -->
            </td>
        </tr>                               
    </tbody>
</table>
                    </div>
                 </div>
            </div>
        </div>
    </section>
</div>

这是 CSS 声明/链接

<script language="JavaScript" type="text/javascript">
    <!-- This JS disallows hijacking into someone else's frame...
     if (top.location != self.location){top.location=self.location}
    //-->
</script>

<link href="../__themes/bs4_marvelCSS/bs4_bootstrap.css" rel="stylesheet">

<!-- Custom styles for this template -->
<link href="../__themes/bs4_marvelCSS/bs4_dashV3.css" rel="stylesheet">
<link href="../__themes/bs4_marvelCSS/style_sticky-footer-navbar.css" rel="stylesheet">
<link href="../__themes/bs4_marvelCSS/bs4_dashTweaks.css" rel="stylesheet">


<!-- font CSS -->

<!-- roboto -->
<link href="//fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic" rel="stylesheet" type="text/css">

<!-- lato -->
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">

<!-- hammersmith one -->
<link href="https://fonts.googleapis.com/css?family=Hammersmith+One" rel="stylesheet">


<!-- __themes/_fonts/font-glyphicons.css  -->
<link href="../__themes/bs4_marvelCSS/font.css" rel="stylesheet">
<link href="../__themes/bs4_marvelCSS/font-awesome.css" rel="stylesheet">
<link href="../__themes/bs4_marvelCSS/font-glyphicons.css" rel="stylesheet">

<script type="application/x-javascript">addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>

<script>
    $(function () {
    $("#supported").text("Supported/allowed: " + !!screenfull.enabled);
    if (!screenfull.enabled) {
        return false;
    }
    $("#toggle").click(function () {
        screenfull.toggle($("#container")[0]);
    });
});
</script>

Answer 1

为什么要使用 table？您可以使用 bootstrap 网格系统来处理这一切。避免在项目中使用 table。但我会建议你给它一个宽度：

td{width:100% !important;}

尝试这样做可能对您有所帮助。

Bootstrap 4 Table 列大小调整未按预期响应

Bootstrap 4 Table column sizing not responding as expected

css

html-table

dynamic-columns

bootstrap-4

responsive