Question

我想知道如何在这里制作一个点https://gyazo.com/b757f6e984c19f7f4fc433f8147a5103浮在上面就像我不明白我会怎样做我已经尝试过绝对位置并把它放在tbody中的位置它没有奏效。这是我的代码：

<tr>
                                <th scope="row">
                                    <i class="active"></i>
                                    <p>magic</p>
                                </th>
                                <td>magic</td>
                                <td>magic</td>
                                <td>
                                    <p>magic</p>
                                </td>
                                <td>
                                    <p>magic</p>
                                </td>
                                <td>
                                    <div class="dropdown">
                                        <button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                                            <i class="material-icons">more_vert</i>
                                        </button>
                                        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                                            <li><a href="#"><i class="material-icons"></i>Start</a></li>
                                            <li><a href="#"><i class="material-icons"></i>Stop</a></li>
                                            <li><a href="#"><i class="material-icons"></i>Delete</a></li>
                                        </ul>
                                    </div>
                                </td>
                            </tr>

Answer 1

I think you want something like this:

<html>
<head>
    <style>
        .box {
            width: 80%;
            height:40px;
            background: red;
            z-index: 1;
            position: absolute;
        }
        .dot {
            width: 25px;
            height: 25px;
            border-radius: 50%;
            background: green;
            top: 20%;
            right: 0%;
            transform: translate(50%);
            position: absolute;

        }
    </style>
</head>

<div class="box"><div class=dot></div></div>

basicly you need to have a dot that should float out of the div right? In this case, you just need to set position: absolute; then set in what side the dot should be, for example if you want a dot just like in the picture you need to set the right: 0% but it will still be inside the div, so add transform: translate(-50%, 0%) and it will do the job if you have question just comment, hope i solved the problem!

Answer 2

请看这里，你可能正在寻找这个。

演示：https://plnkr.co/edit/qM6rnLCEtgG3TQkxQjOe?p=preview

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Ip Address</th>
      <th>Created</th>
      <th>DataCenter</th>
      <th>Tags</th>
      <th>
        <div class="dropdown">
          <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">More_vert
                                          <span class="caret"></span>
          </button>
          <ul class="dropdown-menu">
            <li>
              <a href="#">Start</a>
            </li>
            <li>
              <a href="#">Stop</a>
            </li>
            <li>
              <a href="#">Delete</a>
            </li>
          </ul>
        </div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="position:relative;padding-left:20px;">Name_xxx
      <div class="circle"></div></td>
      <td>123.168.1.40:8080</td>
      <td>12-10-2010</td>
      <td>ABC_XXX</td>
      <td>
        <input type="radio">
      </td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>

Answer 3

这里有一个示例table代码。希望你有所帮助。

https://jsfiddle.net/rafalito1989/d6pxf26x/

使表头上的点浮动

3 个答案: