[SOLVED] How to make a table used for alignment "flush left" relative to surrounding context?

How to make a table used for alignment "flush left" relative to surrounding context?

Similar to Remove all padding and margin table HTML and CSS, but not the same:

I'm using a table to align labels with input elements. Also that table is used within another element, and whatever I tried, the table data in the left row is indented a bit.

I tried padding, border, margin, text-alignment, etc, but I can't get the first column to align with the other elements outside the table.

First, how it looks (zoomed a bit and added red guide lines to illustrate):

The example code is here:

<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de-DE" xml:lang="de-DE">
  <head>
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  </head>
  <body>
    <div class="grid-1">
      <h1 class="g1-head">Title</h1>
      <span class="g1-info">
    <p>Hatte einer seiner zahllosen Kollegen dieselbe Idee gehabt, ihn
  beobachtet und abgewartet, um ihn nun um die Früchte seiner Arbeit zu
  erleichtern? Oder gehörten die Schritte hinter ihm zu einem der unzähligen
  Gesetzeshüter dieser Stadt, und die stählerne Acht um seine Handgelenke
  würde gleich zuschnappen?</p>
    <p>Er presste sich ganz eng an die Wand hinter ihm und hoffte, der
    Verfolger würde ihn übersehen, als plötzlich neben ihm mit kaum
    wahrnehmbarem Quietschen eine Tür im nächtlichen Wind hin und her
    schwang.</p>
      </span>
      <form method="get" action="/search/submit" enctype="multipart/form-data" class="g1-main">
    <fieldset class="grid-2">
      <legend>Legend 1</legend>
      <span class="g2-info"><p>Name, Vorname, Telefonnummer...</p></span>
      <table class="layout g2-main">
        <tbody>
          <tr>
        <td><label for="i-t">Label for first fild:</label></td>
        <td><input type="text"
               name="t" value="ierl" id="i-t"
               placeholder="something" /></td>
          </tr>
          <tr>
        <td><label for="i-s">Source:</label></td>
        <td><select name="s"  id="i-s">
            <option value="K">Selection K</option>
            <option selected="selected" value="U">Selection U</option>
        </select></td>
          </tr>
        </tbody>
      </table>
      <span class="g2-foot">
        <p>Er presste sich ganz eng an die Wand hinter ihm und hoffte, der
        Verfolger würde ihn übersehen, als plötzlich neben ihm mit kaum
        wahrnehmbarem Quietschen eine Tür im nächtlichen Wind hin und her
          schwang.</p>
      </span>
    </fieldset>
    <fieldset class="grid-2" id="i-fs-o1">
      <legend>More</legend>
    </fieldset>
    <fieldset class="grid-2">
      <legend>Aktion</legend>
      <span class="g2-subm"><input type="submit" name=".submit" value="Search" />
      </span>
    </fieldset>
  </form>
    </div>
  </body>
</html>

Is it possible to make the start of the first cell in a table row align with the surrounding text?

Update 1

In Firefox (128.10.0esr (32-Bit), Windows) I see that the indent happens when transitioning from the table element to the tbody element (look closely!).

But still for that element (margin, border, padding) are all zero.

Solution

The table has a default border-spacing: 2px and cells a padding: 1px.

Set those to 0, or alternatively set border-collapse: collapse. Border widths exist even if no border is visible (i.e. border-style is set to none).

Do you know about the debugger/DOM inspector of your browser? It will show you those things.