增加Bootstrap 4表的列宽

Question

我需要增加列宽，我尝试了宽度 - ％，PX，rem，但这不起作用。 如果表的列数很少，我可以增加列宽，但在我的方案中，如果我有超过15列，我就无法更改宽度。

    public partial class SiteMaster : MasterPage
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            BindCategories();
        }
    }

    protected void BindCategories()
    {
        Categories Categories = new Categories();
        rpt_categories.DataSource = Categories.Get_Categories();
        rpt_categories.DataBind();
    }

    protected void lb_newsCat_Command1(object sender, CommandEventArgs e)
    {
        switch (e.CommandName)
        {
            case "naviTo":
                //Redirect user to selected category
                Response.Redirect("~/" + e.CommandArgument.ToString());
                break;
        }
    }
}

我需要增加下表中的第三列，附加图片以供参考。 我用过Always Responsive Bootstrap 4 Table

Answer 1

您需要使用min-width代替width。

点击＆＃34;运行代码段＆＃34;按钮下方并展开到整页：

＆＃13;

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<table class="table table-responsive">
    <thead>
        <tr>

            <th scope="col">#</th>
            <th scope="col">#</th>

            <th scope="col" style="width: 500px;">Heading heading'</th>
            <th scope="col">Heading</th>

            <th scope="col">Heading</th>
            <th scope="col">Heading</th>

            <th scope="col">Heading</th>
            <th scope="col">Heading</th>

            <th scope="col">Heading</th>
            <th scope="col">Heading</th>

            <th scope="col">Heading</th>
            <th scope="col">Heading</th>

            <th scope="col">Heading</th>
            <th scope="col">Heading</th>

            <th scope="col">Heading</th>
            <th scope="col">Heading</th>

            <th scope="col">Heading</th>
            <th scope="col">Heading</th>

            <th scope="col">Heading</th>
            <th scope="col">Heading</th>
        </tr>
    </thead>
    <tbody>
        <tr>

            <th scope="row">1</th>
            <th scope="row">1</th>

            <td style="min-width: 300px;">jksdfn jhs fjidsh fj id hidsfdsfd</td>
            <td>Cell</td>

            <td>Cell</td>
            <td>Cell</td>

            <td>Cell</td>
            <td>Cell</td>

            <td>Cell</td>
            <td>Cell</td>

            <td>Cell</td>
            <td>Cell</td>

            <td>Cell</td>
            <td>Cell</td>

            <td>Cell</td>
            <td>Cell</td>

            <td>Cell</td>
            <td>Cell</td>

            <td>Cell</td>
            <td>Cell</td>
        </tr>
        <tr>

            <th scope="row">1</th>
            <th scope="row">1</th>

            <td>Cell</td>
            <td>Cell</td>

            <td>Cell</td>
            <td>Cell</td>

            <td>Cell</td>
            <td>Cell</td>

            <td>Cell</td>
            <td>Cell</td>

            <td>Cell</td>
            <td>Cell</td>

            <td>Cell</td>
            <td>Cell</td>

            <td>Cell</td>
            <td>Cell</td>

            <td>Cell</td>
            <td>Cell</td>

            <td>Cell</td>
            <td>Cell</td>
        </tr>
    </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;