css 图像和链接未在HTML表内呈现

gg0vcinb  于 2023-02-17  发布在  其他
关注(0)|答案(2)|浏览(118)

我有一个表,其中的字段包含图像和链接,但是它给出了代码而不是呈现它。

<table id="table" 
             data-toggle="table"
             data-search="true"
             data-filter-control="true" 
             data-show-export="true"
       data-show-refresh="true"
       data-show-toggle="true"
       data-pagination="true"

             data-toolbar="#toolbar"
       class="table-responsive">
    <thead>
        <tr>
            <th data-field="state" data-checkbox="true"></th>
            <th data-field="prenom" data-filter-control="input" data-sortable="true">Title</th>
            <th data-field="date" data-filter-control="select" data-sortable="true">Price</th>
            <th data-field="examen" data-filter-control="select" data-sortable="true">Image</th>
            <th data-field="note" data-sortable="true">Link</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="bs-checkbox "><input data-index="0" name="btSelectItem" type="checkbox"></td>
            <td>Maths Tution</td>
            <td>$20</td>
            <td><img src="https://i.imgur.com/0GoaYKd.jpg" height="100" width="100"></td>
            <td><a href="https://monsoonmalabar.com/sonyshop/other/product-13/">Go</a></td>
        </tr>
        <tr>
            <td class="bs-checkbox "><input data-index="1" name="btSelectItem" type="checkbox"></td>
            <td>Milk</td>
            <td>$5</td>
            <td><img src="https://i.imgur.com/2ZOroMI.jpg" height="100" width="100"></td>
            <td><a href="https://monsoonmalabar.com/sonyshop/test_category_2/product-6/">Go</a></td>
        </tr>
            </tbody>
</table>
      </div>

这是网站的链接,https://www.monsoonmalabar.com/aggregate_search
如何在这里呈现html?

luaexgnf

luaexgnf1#

引导表转义HTML标记。在table标记中添加data-escape="false"
https://bootstrap-table.com/docs/api/table-options/#escape

abithluo

abithluo2#

<!DOCTYPE html>
<html>
  <head>
    <style>
      table,
      th,
      td {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <h2>Bordered HTML Table</h2>
    <p>Use the CSS border property to add a border to the table.</p>
    <table
      id="table"
      data-toggle="table"
      data-search="true"
      data-escape="false"
      data-filter-control="true"
      data-show-export="true"
      data-show-refresh="true"
      data-show-toggle="true"
      data-pagination="true"
      data-toolbar="#toolbar"
      class="table-responsive"
      style="width: 100%;"
    >
      <thead>
        <tr>
          <th data-field="state" data-checkbox="true"></th>
          <th
            data-field="prenom"
            data-filter-control="input"
            data-sortable="true"
          >
            Title
          </th>
          <th
            data-field="date"
            data-filter-control="select"
            data-sortable="true"
          >
            Price
          </th>
          <th
            data-field="examen"
            data-filter-control="select"
            data-sortable="true"
          >
            Image
          </th>
          <th data-field="note" data-sortable="true">Link</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="bs-checkbox">
            <input data-index="0" name="btSelectItem" type="checkbox" />
          </td>
          <td>Maths Tution</td>
          <td>$20</td>
          <td>
            <img
              src="https://i.imgur.com/0GoaYKd.jpg"
              height="100"
              width="100"
            />
          </td>
          <td>
            <a href="https://monsoonmalabar.com/sonyshop/other/product-13/"
              >Go</a
            >
          </td>
        </tr>
        <tr>
          <td class="bs-checkbox">
            <input data-index="1" name="btSelectItem" type="checkbox" />
          </td>
          <td>Milk</td>
          <td>$5</td>
          <td>
            <img
              src="https://i.imgur.com/2ZOroMI.jpg"
              height="100"
              width="100"
            />
          </td>
          <td>
            <a
              href="https://monsoonmalabar.com/sonyshop/test_category_2/product-6/"
              >Go</a
            >
          </td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

相关问题