Repository: flutter
Issue: Partial table cell and border alignment when content size is not known in advance
Labels: c: new feature,framework,c: proposal,P3,team-framework,triaged-framework

## Steps to Reproduce

I am using table borders to draw double elimination brackets, similar ones to e.g. https://www.printyourbrackets.com/pdfbrackets/6teamDouble.pdf

To be able to add partial borders (not for entire rows or columns), I'm using the `decoration` of `Container`.
For some reason I can't seem to align the bordes properly, please see the example below:

<img width="998" alt="Screenshot 2022-07-19 at AM 11 33 03" src="https://user-images.githubusercontent.com/1841944/179719558-e6b6e8bb-4ef8-4401-a71c-17a347cf759e.png">

The desired outcome would be the last example, but with thicker borders (like in the first one).
Since I don't know in advance which cell will be the largest and can't apply `TableCellVerticalAlignment.fill` to every cell, is there a workaround I can try?

<details>
<summary>Bracket misalignment example</summary>

```dart
// https://dartpad.dev/?id=33b4e161d91df028d835c0795467e07f

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) => const MaterialApp(home: Scaffold(body: MyStatelessWidget()));
}

class MyStatelessWidget extends StatelessWidget {
  const MyStatelessWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(children: [
      const Text("Unaltered"),
      createTable(),
      const Text("withNoBorderWidth"),
      createTable(withNoBorderWidth: true),
      const Text("withFill"),
      createTable(withFill: true),
      const Text("withNoBorderWidth & withFill"),
      createTable(withNoBorderWidth: true, withFill: true),
    ]);
  }

  Container createTable({bool withNoBorderWidth = false, bool withFill = false}) {
    var cellBackgroundColor = Colors.red.withAlpha(50),
        borderSide = BorderSide(width: withNoBorderWidth ? 0 : 5), // FIXME width of 0 eliminates some of the gap
        topRightBorder = BoxDecoration(border: Border(top: borderSide, right: borderSide), color: cellBackgroundColor),
        bottomRightBorder = BoxDecoration(border: Border(right: borderSide, bottom: borderSide), color: cellBackgroundColor),
        rightBorder = BoxDecoration(border: Border(right: borderSide), color: cellBackgroundColor),
        bottomBorder = BoxDecoration(border: Border(bottom: borderSide), color: cellBackgroundColor);

    var emptyCell = const MapEntry(BoxDecoration(), Text(""));

    var rows = [
      [MapEntry(topRightBorder, const Text("A")), emptyCell, emptyCell],
      [MapEntry(bottomRightBorder, const Text("B", style: TextStyle(fontSize: 30))), MapEntry(topRightBorder, const Text("E")), emptyCell],
      [emptyCell, MapEntry(rightBorder, const Text("")), MapEntry(bottomBorder, const Text("G"))],
      [emptyCell, MapEntry(bottomRightBorder, const Text("F")), emptyCell],
    ].map((r) => r.map((c) => Container(decoration: c.key, child: c.value) as Widget).toList()).toList();

    if (withFill) {
      // FIXME don't know in advance which cell will be the largest and can't apply to every cell
      rows[1][1] = TableCell(verticalAlignment: TableCellVerticalAlignment.fill, child: rows[1][1]);
    }
    return Container(
      margin: const EdgeInsets.all(20),
      child: Table(
        defaultVerticalAlignment: TableCellVerticalAlignment.middle,
        children: rows.map((r) => TableRow(children: r)).toList(),
      ),
    );
  }
}
```
</details>

### Actual Results

The table cells need manual adjustments to not have holes in them.
 
### Expected results

I create the rows and columns and the table calculates the final cell sizes automatically without me having to know the layout of the cells in advance - similarly to HTML tables and how Google Spreadsheets does it.

1) Changing the border width introduces offsets to the other rows:
<img width="796" alt="image" src="https://user-images.githubusercontent.com/1841944/180416379-478b2cfc-2af6-4b39-98fe-7491f64b11fa.png">

2) There no way currently (or at least I couldn't find one, hence my question for better workaround) to make the table just auto-fill without me having to select some special cells that should expand and which shouldn't, as shown in https://github.com/flutter/flutter/issues/107917#issuecomment-1191182066