html - CSS设置两列静态

Question

Hello, I need help at styling the table. I want the update/delete button and its table cell to be static and hope anyone out there can help. My issue is when i stretch the table, or expand to fill in the details in other rows, the buttons and its column will expand and shrink. How do I make both buttons not expand and the the two column cells to be static/fixed.

So far I've tried position: absolute/fixed/auto and display: inline-block/auto.

我的 CSS 在这里

.button td {

    white-space: nowrap;
    position: absolute;   /*to fixed the button location*/ 

    }

.center {
    display: table-cell;
text-align: center;
}

CODE SAMPLE HERE

Answer 1

两件事:

• 你正在应用 .button td 但是你的 .button 已经是一个 td 所以它应该只被应用 .按钮

• 当您将 position:absolute 应用于子元素时，将 position:relative 应用于其父元素总是更好

absolute

Do not leave space for the element. Instead, position it at a specified position relative to its closest positioned ancestor or to the containing block. Absolutely positioned boxes can have margins, they do not collapse with any other margins.

更多信息 here

下面是一个片段:

.button {
  white-space: nowrap;
  position: absolute;
  /*to fixed the button location*/
}
.center {
  display: table-cell;
  text-align: center;
}
table.table {
  font-family: arial;
  font-size: small;
  word-wrap: break-word;
  table-layout: auto;
  width: 100%;
}
table.table td {
  padding: 5px;
  border: solid 1px #7f7f7f;
  white-space: nowrap;
  overflow: hidden;
  width: 125px;
  height: 25px;
  border-collapse: collapse;
  margin: 2px;
  position: relative;
}
table.table th {
  border: 1px solid #7f7f7f;
  padding: 5px;
  white-space: nowrap;
  overflow: hidden;
  width: 125px;
  height: 25px;
  font-weight: bold;
  background-color: #5C82FF;
  color: white;
}
table.table th a {
  text-decoration: none;
  text-align: center;
  padding-right: 20px;
  font-weight: bold;
  white-space: nowrap;
}

<table>
  <table id="datatable" class="table">
    <thead>
      <tr>
        <th style="display: none;">ID</th>
        <th>Name<i style="color: red">*</i>

        </th>
        <th>Contact<i style="color: red">*</i>

        </th>
        <th>Contact 2</th>
        <th>Fax</th>
        <th>Email</th>
        <th>Location<i style="color: red">*</i>

        </th>
        <th></th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <form:input path="name" />
        </td>
        <td>
          <form:input path="contact" />
        </td>
        <td>
          <form:input path="contact2" />
        </td>
        <td>
          <form:input path="contactfax" />
        </td>
        <td>
          <form:input path="fax" />
        </td>
        <td>
          <form:input path="location" />
        </td>
        <div class="center">
          <td class="button">
            <input type="submit" value="Update" style=" margin: 0 auto;" />
          </td>
        </div>
        <div class="center">
          <td class="button">
            <input type="submit" value="Delete" style=" margin: 0 auto;" />
          </td>
        </div>