วิธีการจัดช่องทำเครื่องหมายในเซลล์ตาราง

102

เซลล์ไม่มีอะไรเลยนอกจากช่องทำเครื่องหมาย ค่อนข้างกว้างเนื่องจากข้อความในแถวส่วนหัวของตาราง ฉันจะทำเครื่องหมายกลางช่อง (ด้วย CSS แบบอินไลน์ใน HTML ของฉันได้อย่างไร (ฉันรู้))

ฉันเหนื่อย 

 <td>
      <input type="checkbox" name="myTextEditBox" value="checked" 
      style="margin-left:auto; margin-right:auto;">
 </td>

แต่ไม่ได้ผล ผมทำอะไรผิดหรือเปล่า?

อัปเดต: นี่คือหน้าทดสอบ ใครช่วยแก้ไขด้วย CSS แบบอินไลน์ใน HTML - เพื่อให้ช่องทำเครื่องหมายอยู่กึ่งกลางคอลัมน์ 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Alignment test</title>
</head>
<body>

<table style="empty-cells:hide; margin-left:auto; margin-right:auto;" border="1"   cellpadding="1" cellspacing="1">

  <tr>
    <th>Search?</th><th>Field</th><th colspan="2">Search criteria</th><th>Include in report?<br></th>
  </tr>

  <tr>
    <td>
        <input type="checkbox" name="query_myTextEditBox" style="text-align:center; vertical-align: middle;">    
    </td>

    <td>
      myTextEditBox
    </td>

    <td>
       <select size ="1" name="myTextEditBox_compare_operator">
        <option value="=">equals</option>
        <option value="<>">does not equal</option>
       </select>
    </td>

    <td>
      <input type="text" name="myTextEditBox_compare_value">
    </td>

    <td>
      <input type="checkbox" name="report_myTextEditBox" value="checked" style="text-align:center; vertical-align: middle;">
    </td>

  </tr>

</table>


</body>
</html>

ฉันยอมรับคำตอบของ @Hristo - และนี่คือการจัดรูปแบบอินไลน์ ... 

<table style="empty-cells:hide;" border="1"   cellpadding="1" cellspacing="1">

    <tr>
        <th>Search?</th><th>Field</th><th colspan="2">Search criteria</th><th>Include in report?<br></th>
    </tr>

    <tr>
        <td style="text-align: center; vertical-align: middle;">
            <input type="checkbox" name="query_myTextEditBox">    
        </td>

        <td>
            myTextEditBox
        </td>

        <td>
            <select size ="1" name="myTextEditBox_compare_operator">
                <option value="=">equals</option>
                <option value="<>">does not equal</option>
            </select>
        </td>

        <td>
            <input type="text" name="myTextEditBox_compare_value">
        </td>

        <td style="text-align: center; vertical-align: middle;">
            <input type="checkbox" name="report_myTextEditBox" value="checked">
        </td>

    </tr>

</table>
html  css 
— Mawg says reinstate Monica
แหล่งที่มา
<td align="center"> <input type="checkbox" name="myTextEditBox" value="checked" ></td> will make it work in IE8,9. However in IE10 or chrome, the checkbox or radiobox is defined in a box, no matter you see the box or not. The box will always left aligned. But inside the defining box, the checkbox or radio is centered. If the width of the containing TD is 100px, the checkbox is 50px, then it is always left aligned. To center the checkbox, you can make the defining box of the chekbox to be 100px, which is the the same width of the containing TD.
— qeq

คำตอบ:

112

UPDATE

How about this... http://jsfiddle.net/gSaPb/

Check out my example on jsFiddle: http://jsfiddle.net/QzPGu/

HTML

<table>
  <tr>
    <td>
      <input type="checkbox" name="myTextEditBox" value="checked" /> checkbox
    </td>
  </tr>
</table>

CSS

td {
  text-align: center; /* center checkbox horizontally */
  vertical-align: middle; /* center checkbox vertically */
}
table {
  border: 1px solid;
  width: 200px;
}
tr {
  height: 80px;   
}

I hope this helps.

— Hristo
แหล่งที่มา
2
+1 Thanks, but it doesn't seem to work in my example. Please see updated question
— Mawg says reinstate Monica
+1 That works. I have posted the updated code - with inline formatting - above. Now I just have to do some file compare & figure out the difference that makes it work., Thanks
— Mawg says reinstate Monica
Close, but seems slightly off with my bootstrap-4 table. The column header is definitely centered, but the checkbox is a bit left of center
— Addison Klinke
10

This should work, I am using it:

<td align="center"> <input type="checkbox" name="myTextEditBox" value="checked" ></td>
— Miloš
แหล่งที่มา
1
@Gerard, who is talking here about the HTML5 ?
— Miloš
5

For dynamic writing td elements and not rely directly on the td Style

  <td>
     <div style="text-align: center;">
         <input  type="checkbox">
     </div>
  </td>
— Carlos E
แหล่งที่มา
Maybe rather <span> than <div> ?
— Mawg says reinstate Monica
1
div is a block-element; its default display value is “block”. With span, input continues on left. Test to see difference
— Carlos E
A good explanation, which will help others in future (+1) Welcome aboard
— Mawg says reinstate Monica
4

Pull out ALL of your in-line CSS, and move it to the head. Then use classes on the cells so you can adjust everything as you like (don't use a name like "center" - you may change it to left 6 months from now...). The alignment answer is still the same - apply it to the <td> NOT the checkbox (that would just center your check :-) )

Using you code...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Alignment test</title>
<style>
table { margin:10px auto; border-collapse:collapse; border:1px solid gray; }
td,th { border:1px solid gray; text-align:left; padding:20px; }
td.opt1 { text-align:center; vertical-align:middle; }
td.opt2 { text-align:right; }
</style>
</head>
<body>

<table>

      <tr>
        <th>Search?</th><th>Field</th><th colspan="2">Search criteria</th><th>Include in report?<br></th>
      </tr>
      <tr>
        <td class="opt1"><input type="checkbox" name="query_myTextEditBox"></td>
        <td>
          myTextEditBox
        </td>
        <td>
           <select size ="1" name="myTextEditBox_compare_operator">
            <option value="=">equals</option>
            <option value="<>">does not equal</option>
           </select>
        </td>
        <td><input type="text" name="myTextEditBox_compare_value"></td>
        <td class="opt2">
          <input type="checkbox" name="report_myTextEditBox" value="checked">
        </td>
      </tr>
    </table>
    </body>
    </html>
— Dawson
แหล่งที่มา
2
Don't forget...a td is a "special" kind of element. It has it's own unique behaviors - like a block and in-line marriage (from hell).
— Dawson
3

If you don't support legacy browsers, I'd use flexbox because it's well supported and will simply solve most of your layout problems.

#table-id td:nth-child(1) { 
    /* nth-child(1) is the first column, change to fit your needs */
    display: flex;
    justify-content: center;
}

This centers all content in the first <td> of every row.

— Rick Smith
แหล่งที่มา
1

Define the float property of the check element to none:

float: none;

And center the parent element:

text-align: center;

It was the only that works for me.

— Plastónico
แหล่งที่มา
An inherited "float: left;" was ruining it for me. Setting "float: none" fixed it.
— jornhd
0 

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>

<table class="table table-bordered">
  <thead>
    <tr>
      <th></th>
      <th class="text-center">Left</th>
      <th class="text-center">Center</th>
      <th class="text-center">Right</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>
        <span>Bootstrap (class="text-left")</span>
      </th>
      <td class="text-left">
        <input type="checkbox" />
      </td>
      <td class="text-center">
        <input type="checkbox" checked />
      </td>
      <td class="text-right">
        <input type="checkbox" />
      </td>
    </tr>
    <tr>
      <th>
        <span>HTML attribute (align="left")</span>
      </th>
      <td align="left">
        <input type="checkbox" />
      </td>
      <td align="center">
        <input type="checkbox" checked />
      </td>
      <td align="right">
        <input type="checkbox" />
      </td>
    </tr>
  </tbody>
</table>
Expand snippet

— Sergey
แหล่งที่มา
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.