如何使用Tailwind为表格行元素添加边框半径。

huangapple go评论61阅读模式
英文:

How to add a border radius to a table row element using tailwind

问题

我希望我的行有边框半径,但它不起作用,我希望它看起来像这样如何使用Tailwind为表格行元素添加边框半径。

通过添加一个具有以下CSS的空tr,我在行之间留有空间:

.spacer {
  height: 15px;
  background: transparent;
}

我的表格代码如下:

<table className="text-gray-500 rtl w-full text-center font-inter text-base font-semibold">
  <thead className="bg-white text-base text-primary">
    <tr>
      <td scope="col" className="px-4 py-6">
        الرقم
      </td>
      <td scope="col" className="px-4 py-6">
        اسم المشروع
      </td>
      <td scope="col" className="px-4 py-6">
        الحالة
      </td>
      <td scope="col" className="px-4 py-6">
        الدرجة
      </td>
      <td scope="col" className="px-4 py-6">
        التاريخ
      </td>
      <td scope="col" className="px-4 py-6">
        التعديل
      </td>
    </tr>
  </thead>
</table>
英文:

I want my rows to have border radius but it doesn't work , I want it to look like this 如何使用Tailwind为表格行元素添加边框半径。

I have space between rows by adding an empty tr with this css :

.spacer {
  height: 15px;
  background: transparent;
}

my table code looks like this :

 &lt;table className=&quot;text-gray-500  rtl w-full  text-center font-inter text-base font-semibold &quot;&gt;
          &lt;thead className=&quot;bg-white  text-base    text-primary&quot;&gt;
            &lt;tr&gt;
              &lt;td scope=&quot;col&quot; className=&quot;px-4 py-6&quot;&gt;
                الرقم
              &lt;/td&gt;
              &lt;td scope=&quot;col&quot; className=&quot;px-4 py-6&quot;&gt;
                اسم المشروع
              &lt;/td&gt;
              &lt;td scope=&quot;col&quot; className=&quot;px-4 py-6&quot;&gt;
                الحالة
              &lt;/td&gt;
              &lt;td scope=&quot;col&quot; className=&quot;px-4 py-6&quot;&gt;
                الدرجة
              &lt;/td&gt;
              &lt;td scope=&quot;col&quot; className=&quot;px-4 py-6&quot;&gt;
                التاريخ
              &lt;/td&gt;
              &lt;td scope=&quot;col&quot; className=&quot;px-4 py-6&quot;&gt;
                التعديل
              &lt;/td&gt;
            &lt;/tr&gt;
          &lt;/thead&gt;
&lt;/table&gt;

答案1

得分: 2

这个问题之前已经被提出,关于普通的CSS,这是相关的答案,最适用于你的情况。你只需要将这个技巧转换成Tailwind即可。

英文:

The question has been asked before about regular CSS, and this is the answer most applicable to your situation. All you’ll have to do is to translate this technique into Tailwind.

huangapple
  • 本文由 发表于 2023年2月27日 12:34:07
  • 转载请务必保留本文链接:https://go.coder-hub.com/75576803.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定