如何在有文字的矩形内制作一个小方块？

时间：2018-04-11 16:20:22

标签： html css bootstrap-4 rectangles

我在下面有一个截图，我已经在HTML＆amp; CSS。

enter image description here

我为上面的屏幕截图创建了fiddle。我使用Bootstrap 4来制作表格。

我为了制作行而使用的HTML和CSS代码片段是：

HTML： 

<div class="body-manage-attendees">
    <table class="table table-hover">
        <thead>
            <tr>
                <th scope="col">Name</th>
                <th scope="col" class="number">Number</th>
                <th scope="col" class="table2">Table</th>
                <th scope="col" class="status">Status</th>
            </tr>
        </thead>
        <tbody>

            <tr>
                <td class="left">Eve Doe</td>
                <td class="number1">250</td>
                <td class="table1">4</td>
                <td class="right-itemsreceived">Items Received</td>
            </tr>
            <tr>
                <td class="left">Fred Doe</td>
                <td class="number1">250</td>
                <td class="table1">2</td>
                <td class="right-itemsreceived">Items Received</td>
            </tr>
            <tr>
                <td class="left">Fred Doe's Guest 1</td>
                <td class="number1">250</td>
                <td class="table1">2</td>
                <td class="right-itemswaiting"> Items Waiting</td>
            </tr>
            <tr>
                <td class="left">Jack Doe</td>
                <td class="number1">14</td>
                <td class="table1">4</td>
                <td class="right-unpaid">Unpaid</td>
            </tr>
        </tbody>
    </table>
</div>

CSS： 

.table td,
.table th {
    border-top: none! important;
    padding-left: 3%;
}

.table thead th {
    border-bottom: none! important;
}

.table td.left {
    padding-right: 32%;
}

.body-manage-attendees tbody tr:hover {
    background-color: #EDEDED;
}

.body-manage-attendees .number {
    padding-left: 2%;
    padding-right: 6%;
}

.body-manage-attendees .table1 {
    padding-left: 1%;
    text-align: center;
    padding-right: 6%;
}

.body-manage-attendees .table2 {
    padding-left: 1%;
    text-align: center;
    padding-right: 6%;
}

.body-manage-attendees .status {
    padding-left: 1%;
    text-align: center;
}

.body-manage-attendees .right {
    padding-left: 1%;
    text-align: center;
}

.body-manage-attendees .right-bill {
    padding-left: 1%;
    color: white;
    text-align: center;
    background-color: #1173B7;
}

.body-manage-attendees .right-nobill {
    padding-left: 1%;
    text-align: center;
    color: black;
}



问题陈述：

我想知道我需要在上面的CSS代码中做出哪些更改，以便方框（在上面的屏幕截图中标有箭头）显示在彩色矩形内。

4 个答案:

答案 0 :(得分：1)

nodered-test STARTED 2018-04-10T17:32:06Z
NodeRedTestApp STARTED 2018-04-09T21:23:27Z

答案 1 :(得分：1)

请参阅此Fiddle 我添加了一些CSS规则并更新了彩色矩形的HTML结构。

@for /F "tokens=2" %%G in (my_preciouss.txt) do @echo %%G > my_preciouss.txt

// General CSS
.nav-top-searchbar {
    position: relative;
}

#ellipsis {
    top: 12px;
    position: absolute;
    right: 43px;
    cursor: pointer;
}

#ellipsis:focus {
    outline: none;
}

#ellipsis:focus+.dropdown {
    display: block;
}

input[type=text] {
    width: 100%;
    background: #10314c;
}

.dropdown {
    background-color: #FFFFFF;
    display: none;
    /* padding-left: 2%; */
    position: absolute;
    /* height: 150px; */
    right: 0;
    width: 200px;
    z-index: 10;
    list-style-type: none;
    padding-top: 25px;
    padding-bottom: 25px;
    box-shadow: 0 0 15px #888;
    top: 2px;
}

.searchicon {
    float: left;
    margin-top: -20px;
    position: relative;
    top: 26px;
    left: 8px;
    color: white;
    border: 1px solid #FFFFFF;
    z-index: 2;
    padding: 3px;
}

.table td,
.table th {
    border-top: none! important;
    padding-left: 3%;
}

.table thead th {
    border-bottom: none! important;
}

.table td.left {
    padding-right: 32%;
}

.dropdown a {
    color: #676767;
    font-weight: bold;
    font-size: 14px;
}

.dropdown li {
    padding-left: 20px;
}

.dropdown li:hover {
    background-color: #EDEDED;
}

.body-manage-attendees tbody tr:hover {
    background-color: #EDEDED;
}

.body-manage-attendees .number {
    padding-left: 2%;
    padding-right: 6%;
}

.body-manage-attendees .table1 {
    padding-left: 1%;
    text-align: center;
    padding-right: 6%;
}

.body-manage-attendees .table2 {
    padding-left: 1%;
    text-align: center;
    padding-right: 6%;
}

.body-manage-attendees .status {
    padding-left: 1%;
    text-align: center;
}

.body-manage-attendees .right {
    padding-left: 1%;
    text-align: center;
}

.body-manage-attendees .right-bill {
    padding-left: 1%;
    color: white;
    text-align: center;
    background-color: #1173B7;
}

.body-manage-attendees .right-nobill {
    padding-left: 1%;
    text-align: center;
    color: black;
}

.body-manage-attendees .right-unapid {
    padding-left: 1%;
    color: white;
    text-align: center;
    background-color: #1173B7;
}

.body-manage-attendees .right-itemsreceived {
    padding-left: 1%;
    color: white;
    text-align: center;
    background-color: #10314C;
}

.body-manage-attendees .right-itemswaiting {
    padding-left: 1%;
    text-align: center;
    color: white;
    background-color: #10314C;
}

.body-manage-attendees .right-unpaid {
    padding-left: 1%;
    color: white;
    background-color: #1173B7;
    text-align: center;
}

.nav-top-bar {
    display: flex;
    justify-content: space-between;
    padding: 0% 2.5%;
    background: rgb(16, 49, 76);
    align-items: center;
}

.square {
  display: inline-block;
  border-radius: 5px;
  border: 1px solid white;
  height: 15px;
  width: 15px;
  vertical-align: middle;
}

.right-itemsreceived span{
    vertical-align: middle;
    padding-left: 5px;
}

答案 2 :(得分：0)

您可以使用 div Function

开始

所以这是一个例子

.square {
  width: 50%;
  background: #000;
}

.square:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}
<div class="square">
     
</div>

所以这是一个例子

现在使用您的代码：您可以在JSFIDDLE

上看到此处

ofc你可以玩代码并添加boostrap这只是为了让你开始

答案 3 :(得分：0)

<div class="body-manage-attendees">
    <table class="table table-hover">
        <thead>
            <tr>
                <th scope="col">Name</th>
                <th scope="col" class="number">Number</th>
                <th scope="col" class="table2">Table</enter code hereth>
                <th scope="col" class="status">Status</th>
            </tr>
        </thead>
        <tbody>

            <tr>
                <td class="left">Eve Doe</td>
                <td class="number1">250</td>
                <td class="table1">4</td>
                <td class="right-itemsreceived">
                <input  type ="checkbox"/><span style="padding-left:15px">Items Received<span></td>
             </tr>
            <tr>
                <td class="left">Fred Doe</td>
                <td class="number1">250</td>
                <td class="table1">2</td>
                <td class="right-itemsreceived">
                <input  class="right-itemsreceived" type ="checkbox"/><span style="padding-left:15px">Items Received<span></td>

            </tr>
            <tr>
                <td class="left">Fred Doe's Guest 1</td>
                <td class="number1">250</td>
                <td class="table1">2</td>

                <td class="right-itemswaiting"><input type ="checkbox"/><span style="padding-left:15px"> Items Waiting</td>
            </tr>
            <tr>
                <td class="left">Jack Doe</td>
                <td class="number1">14</td>
                <td class="table1">4</td>
                <td class="right-unpaid"><input type ="checkbox"/><span style="padding-left:15px">Unpaid</td>
            </tr>
        </tbody>
    </table>
</div>

只需将这些更改添加到您的代码中，即可为表格数据添加复选框

或者只看这里https://jsfiddle.net/nc2djn5p/151/进行演示

相关问题
最新问题