SpringBoot个人博客友链部分表格小bug(Semantic-UI)

<div  class="m-padded-tb-big">
    <div class="ui container">
      <table class="ui compact teal table" >
        <thead>
          <tr align="center">
            <th>ID</th>
            <th>博客名称</th>
            <th>博客地址</th>
            <th>图片地址</th>
            <th>添加时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr align="center" th:each="friendlink,iterStat : ${pageInfo.list}">
            <td th:text="${iterStat.count}">1</td>
            <td th:text="${friendlink.blogname}">btfqn1024</td>
            <td th:text="${friendlink.blogaddress}">http://lfxin.cn/</td>
            <td th:text="${friendlink.pictureaddress}">http://lfxin.cn/btfqn1024.jpg</td>
            <td th:text="${#dates.format(friendlink.createTime,'yyyy-MM-dd HH:mm')}">2021-03-27 14:20</td>
            <td>
              <a href="#" th:href="@{/admin/friendlinks/{id}/input(id=${friendlink.id})}" class="ui mini teal basic button">编辑</a>
              <a href="#" th:href="@{/admin/friendlinks/{id}/delete(id=${friendlink.id})}" onclick="return confirm('确定要删除该友链吗?')" class="ui mini red basic button">删除</a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

预期效果

预期效果

现在每天就磨一磨小细节,一不小心就测试出我代码上的一个小bug。 本来写前端样式的时候,用的网址比较短。当时没发现什么问题,今天后台上传在线网址的时候由于网址过长导致出问题了,甚至都无法修改了(不想去数据库手动删改),欸~

bug效果

出现bug 前端代码用的是Semantic-UI,当时是跟着B站视频敲得,讲实话对相关语法、用法还不太熟悉;最关键的是,这个框架感觉好像有点冷门,上网也找不到别人写的解决方案。 一开始试图在<div>上加样式解决;试了不少,没啥效果。 没办法,上官网吧~

解决方案

直奔表格,果然找到了相关解决方案:

Fixed A table can use table-layout: fixed a special faster form of table rendering that does not resize table cells based on content.

大致意思: 表格可以使用 table-layout: fixed 来定义特殊情况的表格,它不会根据内容调整表格单元格的大小。

eg:

<table class="ui fixed table"></table>

在这里插入图片描述

Fixed single line tables will automatically ensure content that does not fit in a single line will receive "..." ellipsis

大致意思: fixed single line, 表格将在内容过多的时候显示出"..."。

eg:

<table class="ui fixed single line celled table"></table>

在这里插入图片描述

把这个样式换掉原来那个,问题就解决了~

解决问题成功截图

总结:

老师讲得没错,官网得多逛逛,看不了英文就找中文网站,最不济掺杂着翻译看呗~

end
  • 作者:btfqn1024(联系作者)
  • 发表时间:2021-04-14 00:40
  • 版权声明:自由转载-非商用-非衍生-保持署名(创意共享3.0许可证)
  • 转载声明:转载请附上原文链接
  • 公众号转载:请在文末添加作者公众号二维码(公众号二维码见右边,欢迎关注)
  • 评论