Outline table row

Sciter Forums General discussion Outline table row

Tagged: , ,

This topic contains 10 replies, has 3 voices, and was last updated by  scorpion 2 months, 3 weeks ago.

  • Author
  • #51365



    I wonder how could one outline a table row? As if “focused item” – with dashed/dotted border.
    Outline for cells is not the way, and for row itself it won’t work… See example, I need the second row to be in focus (the whole row, not individual cells).

    Thanks in advance for your advices 🙂

      <style type="text/css">
          behavior: column-resizer;
          border-spacing: 0;
        /* borders */
        @const BORDER_GRID: solid 1dip darkgray;
        thead                         { border: @BORDER_GRID; }
        tbody:not(:empty)             { border: @BORDER_GRID; border-top: none; }
        tbody td:not(:last-child)     { border-right: @BORDER_GRID; }
        tbody tr:not(:last-child) td  { border-bottom: @BORDER_GRID; }
        /* focus and selection */
        tr:checked  { background-image: url(theme:list-view-item-selected); }
        tr:current  { outline: dashed 1dip black -1dip; } /// <<< not working :(
        th, tbody td { padding: 2dip 3dip; }
        th { min-width: 20dip; width: max-content; background-color: threedlightshadow; }
        tfoot td { flow: horizontal; border-spacing: 4dip; padding-top: 4dip; padding-left: -1dip; }
      <script type="text/tiscript">
        function self.ready() {
          $(tbody)[0].state.checked = true;
          $(tbody)[1].state.checked = true;
          $(tbody)[1].state.current = true; /* emulate focus by mouse or smth else */
      <table fixedlayout multiple>
          <tr> <th>#</th> <th>X (mil)</th> <th>Y (mil)</th> <th>Arc Angle (Neg = CW)</th> </tr>
          <tr> <td>1</td> <td>3953.887</td> <td>4086.598</td> <td></td> </tr>
          <tr> <td>2</td> <td>4763.688</td> <td>3276.802</td> <td>20.292</td> </tr>
          <tr> <td>3</td> <td>4595</td>     <td>2995</td>     <td>20.292</td> </tr>
        <tfoot><tr><td colspan=4><button>Add</button><button>Remove</button></td></tr></tfoot>
  • #51368


    Outline for cells is not the way

    Paint your own outline.

      tr:current td { aspect: selectedCell; }
    <script type="text/tiscript">
      function selectedCell() {
        this.paintOutline = function(gfx) {
          var (l, t, r, b) = this.box(#rect, #inner, #padding);
          var (x1, x2) = (l-0.5, this.box(#width)-r+0.5);
          var (y1, y2) = (t-0.5, this.box(#height)-b+0.5);
          if (!this.next)
          if (!this.prior)

    • This reply was modified 3 months ago by  Mikanoshi.
  • #51370


    It’s a bug in current version with tr {outline:...} rendering.

    Fixed by r5147

  • #51378


    Got it, thanks.
    Thought it wasn’t working by design – something like mentioned at stackoverflow

    • #51379


      Technically <tr> is not a box element – it may contain rowspan cells for example.
      Yet its box model is quite non-trivial – no margins or paddings for example.

      That’s why browsers are not bothering to render

      ‘s at all – only cells in them.
  • #51409


    Spent some time on experiments, that’s what is done with styles only:
    styled outline
    Outlines are working, but I couldn’t make them fully identical on all rows (1 pixel difference from left-right for example), and while waiting border-collapse: collapse fix there is “self painted” version:
    painted outline
    It works fine, but I have some questions:

    1. doesn’t tr Element have paintOutline function (and other paint*) or calls to it? aspect for tr never called one…
    2. is there a way to customize strokeDash(#dashed) drawing? I would like it to be painted as CSS outlines do (on top – 3colored pixels, 2 empty), but what I managed to achieve is 3 colored, 1 empty (or 2 colored, 2 empty without strokeCap(#square)): dashed lines
  • #51414


    <tr> is neither a box nor a drawable element. Attach your drawing to <tbody>.

    Yet, I’ve added support of custom dash patterns:

    Graphics.strokeDash ( dash: #solid | #dotted | #dashed | pattern: Array [, offset: float ]) : Graphics

    Stroke dash type, either one of predefined types (#solid, #dotted or #dashed) or custom pattern defined by an array whose elements (floats) are set to the length of each dash and space in the dash pattern.

    This will appear in v and so by using


    you will have what you want.

  • #51417


    How did you draw a 1px line without any antialiasing?)

  • #51418


    <tr> is neither a box nor a drawable element. Attach your drawing to <tbody>.

    Got it. That’s what i did, yes (just used <table>, not <tbody>)

    I’ve added support of custom dash patterns

    Great! Thank you!

    How did you draw a 1px line without any antialiasing?)

    Used gfx.antialiasing(false); and Andrew’s advice concerning drawing lines (something could be redundant):

        function FocusableRow() {
          this.paintOutline = function(gfx) {
            var row = this.$(tbody tr:current);
            if ( !row )
              return false;
            var elfTD = row.$(td:first-child);
            if ( !elfTD )
              return false;
            function translateToSubpixel(el) {
              var pixelsPerDipX = el.toPixels(1dip, #width);
              var pixelsPerDipY = el.toPixels(1dip, #height);
              gfx.translate(pixelsPerDipX / 2.0, pixelsPerDipY / 2.0)
                 .scale(pixelsPerDipX, pixelsPerDipY);
            var (left, top) = this.box(#position, #border, #root);
            var (ltd, ttd) = elfTD.box(#position, #border, #root);
            gfx.translate(ltd - left + 1, ttd - top);
            var (l, t, r, b) = elfTD.box(#rect, #padding, #self);
            for ( var td in row.$$(td:not(:first-child)) )
              r += td.box(#width, #border, #self);
            r += elfTD.style#border-right-width;
            r -= row.$(td:last-child).style#border-right-width;
            gfx.line(l,t, r,t);
            gfx.line(r,t, r,b);
            gfx.line(r,b, l,b);
            gfx.line(l,b, l,t);
            return false; // 

    P.S. @mikanoshi, just FYI: some ISPs in Russia block s01.geekpic.net fully because of one record in blocking list, so on my working PC I can’t see any of your pictures 🙂

    • #51419


      some ISPs in Russia block s01.geekpic.net fully because of one record in blocking list, so on my working PC I can’t see any of your pictures 🙂

      Your ISP is savage 🙂 Так-то я из России, у моего провайдера только та ссылка запрещена, а не весь s01.geekpic.net

    • #51420


      🙂 Да я догадался. Просто у Андрея тут всё по-английски, так и написал) Дома провайдер отрабатывает тоже нормально, только рабочий шалит.

You must be logged in to reply to this topic.