making header row the width of the data row in html-CodePudding

I have a table in HTML. The problem is that I have set space between each cell so I used margin for that. but that causes that I can not have col-12 for a row, so in this case, it became col-11(sum of all cols). but it caused the row header to be in a full row and iterative rows (data row) are not in a full row. how can I make the header row be in data row width?

.event-col {
  border-radius: 10px;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
  background-color: #fff;
  padding: 10px;
  margin: 2px;
  display: inline-block;
}

.event-col-header {
  padding: 10px;
  margin: 2px;
  display: inline-block;
  border: 0px !important;
  font-weight: bold;
  font-family: IRANSans;
}

.event-row {
  border-radius: 10px;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
  background-color: #c1d2fe;
  margin: 10px;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<div >
  <div >
    <table id="example" >
      <tr >
        <th >No</th>
        <th >Name </th>
        <th >Date</th>
        <th >Hour</th>
        <th >Address</th>
      </tr>

      <tr>
        <td >@counter</td>
        <td >@item.Name</td>
        <td >@item.EventDate</td>
        <td > @item.StartTime </td>
        <td >@item.Address</td>
      </tr>
    </table>
  </div>
</div>

CodePudding user response：

They are the same width but since you are using inline-block they not use total of parent elemment and so you are not using bootstrap cols correctly for in tables you no need to use cols and rows

bootstrap gird system is not good for tables try to build it without BS gird

(also movafagh bashi)

CodePudding user response：

I changed your code as follows:

.event-col {
    border-radius: 10px;
    box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
    background-color: #fff;
    /*padding: 10px;*/
    /*margin: 2px;*/
    display: inline-block;
    width: 100%;
}
.event-col-header {
    /*padding: 10px;*/
    /*margin: 2px;*/
    display: inline-block;
    /*border: 0 !important;*/
    font-weight: bold;
    font-family: IRANSans;
}
.event-row {
    border-radius: 10px;
    box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
    background-color: #c1d2fe;
    /*margin: 10px;*/
}

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- bootstrap 4.6 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

    <!-- my style-sheet -->
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body dir="rtl">

<div >
<div >
    <div >
        <table id="example"  >
            <tr >
                <th >
                    <span >No</span>
                </th>
                <th >
                    <span >Name</span>
                </th>
                <th >
                    <span >Date</span>
                </th>
                <th >
                    <span >Hour</span>
                </th>
                <th >
                    <span >Address</span>
                </th>
            </tr>
            <tr >
                <td >
                    <span >@counter</span>
                </td>
                <td >
                    <span >@item.Name</span>
                </td>
                <td >
                    <span >@item.EventDate</span>
                </td>
                <td >
                    <span >@item.StartTime</span>
                </td>
                <td >
                    <span >@item.Address</span>
                </td>
            </tr>
            <tr >
                <td >
                    <span >@counter</span>
                </td>
                <td >
                    <span >@item.Name</span>
                </td>
                <td >
                    <span >@item.EventDate</span>
                </td>
                <td >
                    <span >@item.StartTime</span>
                </td>
                <td >
                    <span >@item.Address</span>
                </td>
            </tr>
            <tr >
                <td >
                    <span >@counter</span>
                </td>
                <td >
                    <span >@item.Name</span>
                </td>
                <td >
                    <span >@item.EventDate</span>
                </td>
                <td >
                    <span >@item.StartTime</span>
                </td>
                <td >
                    <span >@item.Address</span>
                </td>
            </tr>

        </table>
    </div>
</div>
</div>


<!-- bootstrap scripts -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>

</body>
</html>

Important tips in my opinion about that code:

1- Do not put your text directly inside a col-1 or col-2 or ... . suppose them as container and put contents inside other HTML tags like <span> in this example.

2- Use margin and padding utilities of bootstrap instead of setting margin and padding yourself.

3- When you use row and col-* classes, usually using container-fluid or container classes gives better results. So I put a .container-fluid tag as a whole parent for table.

4- If you want to support responsiveness in your table, bootstrap has a .table-responsive class that you can add to your table.

CodePudding user response：

When I see the bootstrap table documentation, I could not find any example that uses col-* classes inside tables. So I also wrote another code that uses HTML <colgroup> tag instead of using col-* classes that has similar result:

.event-col {
    border-radius: 10px;
    box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
    background-color: #fff;
    display: inline-block;
    width: 100%;
}
.event-col-header {
    display: inline-block;
    font-weight: bold;
    font-family: IRANSans;
}
.event-row {
    border-radius: 10px;
    box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
    background-color: #c1d2fe;
}

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <!-- bootstrap 4.6 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

  <!-- my style-sheet -->
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>
<body dir="rtl">

<div >
<div >
  <div >
    <table id="example"  >
      <colgroup>
        <col style="width: 9%">
        <col style="width: 18%">
        <col style="width: 9%">
        <col style="width: 18%">
        <col style="width: 46%">
      </colgroup>
      <tr >
        <th>
          <span >No</span>
        </th>
        <th>
          <span >Name</span>
        </th>
        <th>
          <span >Date</span>
        </th>
        <th>
          <span >Hour</span>
        </th>
        <th>
          <span >Address</span>
        </th>
      </tr>
      <tr >
        <td>
          <span >@counter</span>
        </td>
        <td>
          <span >@item.Name</span>
        </td>
        <td>
          <span >@item.EventDate</span>
        </td>
        <td>
          <span >@item.StartTime</span>
        </td>
        <td>
          <span >@item.Address</span>
        </td>
      </tr>
      <tr >
        <td>
          <span >@counter</span>
        </td>
        <td>
          <span >@item.Name</span>
        </td>
        <td>
          <span >@item.EventDate</span>
        </td>
        <td>
          <span >@item.StartTime</span>
        </td>
        <td>
          <span >@item.Address</span>
        </td>
      </tr>
      <tr >
        <td>
          <span >@counter</span>
        </td>
        <td>
          <span >@item.Name</span>
        </td>
        <td>
          <span >@item.EventDate</span>
        </td>
        <td>
          <span >@item.StartTime</span>
        </td>
        <td>
          <span >@item.Address</span>
        </td>
      </tr>

    </table>
  </div>
</div>
</div>

<!-- bootstrap scripts -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>

</body>
</html>

CodePudding user response：

You really don't want to tangle Bootstrap's grid layout with tables. If all you're after is the bubble styling, put divs inside your table cells and use those.

If you then want to size some columns explicitly, do that.

.event-row {
  border-radius: 10px;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
  background-color: #c1d2fe;
}

.event-col {
  border-radius: 10px;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
  background-color: #fff;
  padding: 10px;
  display: inline-block;
}

.event-col-header {
  padding: 10px;
  display: inline-block;
  border: 0px !important;
  font-weight: bold;
  font-family: IRANSans;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<div >
  <div >
    <table id="example" >
      <tr >
        <th>
          <div >No</div>
        </th>
        <th>
          <div >Name</div>
        </th>
        <th>
          <div >Date</div>
        </th>
        <th>
          <div >Hour</div>
        </th>
        <th>
          <div >Address</div>
        </th>
      </tr>

      <tr>
        <td>
          <div >@counter</div>
        </td>
        <td>
          <div >@item.Name</div>
        </td>
        <td>
          <div >@item.EventDate</div>
        </td>
        <td>
          <div > @item.StartTime</div>
        </td>
        <td>
          <div >@item.Address</div>
        </td>
      </tr>
    </table>
  </div>
</div>